Code Playground

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="sky">
	<div class="moon"></div>
	<div class="clouds">
		<span></span><span></span><span></span><span></span>
	</div>
</div>
<div class="content">
	<div class="level-0">
		<div class="door">
			<div class="nosferatu"></div>
			<div class="logs">
				<span></span><span></span><span></span>
			</div>
		</div>
		<div class="shining"></div>
	</div>
	<div class="level-1">
		<div class="window">
			<div class="frankenstein"></div>
		</div>
		<div class="shining"></div>
	</div>
	<div class="level-2">
		<div class="window">
			<div class="witch"></div>
		</div>
		<div class="shining"></div>
	</div>	
	<div class="balcony"></div>
	<div class="bat-cat">
		<div class="body"></div>
		<div class="leg"></div>
		<div class="leg"></div>
		<div class="head"></div>
		<div class="ears"></div>
		<div class="tail"></div>
		<div class="wings">
			<div class="wing">
				<div class="finger"></div>
				<div class="finger"></div>
				<div class="finger"></div>
				<div class="finger"></div>
				<div class="membrane"></div>
				<div class="membrane"></div>
				<div class="membrane"></div>
			</div>
			<div class="wing">
				<div class="finger"></div>
				<div class="finger"></div>
				<div class="finger"></div>
				<div class="finger"></div>
				<div class="membrane"></div>
				<div class="membrane"></div>
				<div class="membrane"></div>
			</div>
		</div>
	</div>
	<div class="roof-0">
		<div class="window">
			<div class="phantom"></div>
			<div class="phantom"></div>
		</div>
		<div class="shining"></div>
	</div>
	<div class="roof-1"></div>
	<div class="roof-2">
		<div class="chimney"></div>
		<div class="smoke">
			<span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
		</div>
	</div>
	<div class="flying-bat"></div>
	<div class="fence">
		<span></span><span></span>
		<div class="bat">
			<div class="head">
				<div class="eyes"></div>
				<div class="mouth"></div>
			</div>
			<div class="wings"></div>
			<div class="legs">
				<div class="leg"></div>
				<div class="leg"></div>
			</div>
		</div>
		<div class="chimney"></div>
	</div>
	<div class="fence">
		<span></span><span></span>
		<div class="tomb">RIP</div>
		<div class="zombie-hand"></div>
		<div class="stones"></div>
	</div>
	<div class="skeleton-floating"></div>
	<div class="skeleton">
		<div class="head">
			<div class="cranium"></div>
			<div class="nose"></div>
			<div class="mouth"></div>
		</div>
		<div class="neck"></div>
		<div class="torso">
			<div class="pelvis"></div>
			<div class="column"></div>
			<div class="rib"></div>
			<div class="rib"></div>
			<div class="clavicle"></div>
		</div>
		<div class="arms">
			<div class="arm">
				<div class="bone"></div>
				<div class="bone"></div>
				<div class="hand">
					<div class="bone"></div>
					<div class="bone"></div>
					<div class="bone"></div>
					<div class="bone"></div>
					<div class="bone"></div>
					<div class="bone"></div>
				</div>
			</div>
			<div class="arm">
				<div class="bone"></div>
				<div class="bone"></div>
				<div class="hand">
					<div class="bone"></div>
					<div class="bone"></div>
					<div class="bone"></div>
					<div class="bone"></div>
					<div class="bone"></div>
					<div class="bone"></div>
				</div>
			</div>
		</div>
		<div class="legs">
			<div class="leg">
				<div class="bone"></div>
				<div class="bone"></div>
				<div class="bone ball"></div>
				<div class="foot">
					<div class="bone"></div>
					<div class="bone"></div>
					<div class="bone"></div>
				</div>
			</div>
			<div class="leg">
				<div class="bone"></div>
				<div class="bone"></div>
				<div class="bone ball"></div>
				<div class="foot">
					<div class="bone"></div>
					<div class="bone"></div>
					<div class="bone"></div>
				</div>
			</div>
		</div>
	</div>
	<div class="electricity">
		<div class="pole"></div>
		<div class="bar"><span></span></div>
		<div class="bar"><span></span></div>
		<div class="cable">
			<span></span><span></span><span></span>
		</div>
		<div class="cable"></div>
		<div class="box">
			<div class="sparks">
				<span></span><span></span><span></span><span></span><span></span>
			</div>
		</div>
	</div>
	<div class="pumpkin">
		<span></span><span></span><span></span><span></span><span></span>
		<div class="eyes"></div>
		<div class="nose"></div>
		<div class="mouth">
			<div class="teeth"></div>
		</div>
	</div>
</div>
</body>
</html>

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
:root {
	--gray: #1a191a;
	--black: #080708;
	--dark: #443847;
	--window: #ffc800cf;
	--window: #ff8d00cf;
	--house: #000000;
	--bat: #070707;
	--bounce: linear(0 0%, 0 2.27%, 0.02 4.53%, 0.04 6.8%, 0.06 9.07%, 0.1 11.33%, 0.14 13.6%, 0.25 18.15%, 0.39 22.7%, 0.56 27.25%, 0.77 31.8%, 1 36.35%, 0.89 40.9%, 0.85 43.18%, 0.81 45.45%, 0.79 47.72%, 0.77 50%, 0.75 52.27%, 0.75 54.55%, 0.75 56.82%, 0.77 59.1%, 0.79 61.38%, 0.81 63.65%, 0.85 65.93%, 0.89 68.2%, 1 72.7%, 0.97 74.98%, 0.95 77.25%, 0.94 79.53%, 0.94 81.8%, 0.94 84.08%, 0.95 86.35%, 0.97 88.63%, 1 90.9%, 0.99 93.18%, 0.98 95.45%, 0.99 97.73%, 1 100%);
}

html { overflow: hidden; }

body {
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	align-content: flex-end;
	background: 
		linear-gradient(238deg, #000, #fff0, #fff0), 
		linear-gradient(180deg, #000, #fff0, #fff0),
		radial-gradient(circle at 50% 100%, #005eff, #6d006d, #38005e );
}

body:after {
	content: "";
	position: fixed;
	width: 100%;
	height: 10vmin;
	z-index: -1;
	bottom: 0;
	background: 
		radial-gradient(circle at calc(50% - 33vmin) calc(100% + 31vmin), var(--house) 40vmin, #fff0 calc(40vmin + 1px) ), 
		radial-gradient(circle at calc(50% + 33vmin) calc(100% + 30vmin), var(--house) 40vmin, #fff0 calc(40vmin + 1px) ), 
		radial-gradient(circle at 50% calc(100% + 43vmin), var(--house) 50vmin, #fff0 calc(50vmin + 1px) );
	background-repeat: no-repeat;
}

.content {
	width: 90vmin;
	height: 90vmin;
	background-size: cover;
	position: relative;
	perspective: 100vmin;
	perspective-origin: top;
	bottom: 5vmin;
}

.content * {
	position: absolute;
	transform-style: preserve-3d;
}

.level-0 {
	width: 30vmin;
	height: 25vmin;
	background: var(--house);
	bottom: 0;
	left: 22vmin;
	transform: rotateX(82deg) skewX(5deg);
	z-index: 1;
}

.level-1 {
	width: 16vmin;
	height: 34vmin;
	background: var(--house);
	bottom: 3.75vmin;
	left: 53vmin;
	transform: perspective(100vmin) rotateX(82deg) skewX(-10deg);
}

.level-2 {
	width: 19vmin;
	height: 35vmin;
	background: var(--house);
	bottom: 31.5vmin;
	left: 29vmin;
	transform: perspective(150vmin) rotateX(45deg) skewX(2deg) rotate(2deg);
	clip-path: polygon(0% 85%, 0% 0%, 100% 0%, 100% 94%, 48% 57%);
	z-index: 1;
	box-shadow: 0.25vmin -0.5vmin 0.5vmin 0 #fff3 inset, 0.5vmin -0.5vmin 1.5vmin 0 #fff2 inset;
}

.roof-0 {
	width: 37vmin;
	height: 23vmin;
	bottom: 23.25vmin;
	left: 18.75vmin;
	border: 19vmin solid #0000;
	box-sizing: border-box;
	border-bottom: 22vmin solid var(--house);
	transform: skew(-8deg, -1deg) rotate(1.25deg);
	border-radius: 0.5vmin;
}

.roof-1, .chimney:before {
	background: 
		radial-gradient(circle at -9vmin 1vmin, #fff0 18vmin, #fff3 calc(18vmin + 1px) 18vmin, #fff0 19vmin 100%), 
		radial-gradient(circle at -9vmin 1vmin, #fff0 18vmin, var(--house) calc(18vmin + 1px) ), 
		radial-gradient(circle at 24.5vmin -5vmin, #fff0 25vmin, var(--house) calc(25vmin + 1px) ), #0000;
	width: 21vmin;
	height: 17vmin;
	bottom: 31.75vmin;
	left: 52vmin;
	transform: skew(-8deg, -1deg) rotate(2deg);
	border-radius: 0.5vmin;
	background-size: calc(50% - 1vmin) 100%, calc(50% - 1vmin) 100%, calc(50% + 1vmin) 100%;
	background-repeat: no-repeat;
	background-position: 0 0, 0 0, 99% 0;
}

.roof-2 {
	background: 
		radial-gradient(circle at 34vmin -9vmin, #fff0 35vmin, var(--house) calc(35vmin + 1px) ), 
		radial-gradient(circle at -18vmin 4vmin, #fff0 28vmin, #fff4 calc(28vmin + 1px), #fff0 28.75vmin ), 
		radial-gradient(circle at -18vmin 4vmin, #fff0 28vmin, var(--house) calc(28vmin + 1px) ), #0f00;
	width: 34vmin;
	height: 25vmin;
	bottom: 63.9vmin;
	left: 26vmin;
	transform: skew(-8deg, -1deg) rotate(1deg);
	border-radius: 0.5vmin;
	background-size: calc(50% + 6.5vmin) 100%, calc(50% + 7vmin) 100%, calc(50% - 6.5vmin) 100%, calc(50% - 7vmin) 100%;
	background-repeat: no-repeat;
	background-position: 99% 0, 0 0, 0 0;
}

.door {
	background: 
		linear-gradient(183deg, #fff0 7.5vmin, var(--house) calc(7.5vmin + 1px) 8vmin, #fff0 calc(8vmin + 1px) 0), 
		linear-gradient(94deg, var(--house) 0.75vmin, #fff0 calc(0.75vmin + 1px)), 
		linear-gradient(-94deg, var(--house) 0.75vmin, #fff0 calc(0.75vmin + 1px)), 
		linear-gradient(-5deg, var(--house) 0.5vmin, #fff0 calc(0.5vmin + 1px)), 
		linear-gradient(86deg, #fff0 3.5vmin, var(--house) calc(3.5vmin + 1px) 4vmin, #fff0 calc(4vmin + 1px)), 
		linear-gradient(95deg, #fff0 7vmin, var(--house) calc(7vmin + 1px) 7.5vmin, #fff0 calc(7.5vmin + 1px)), 
		linear-gradient(92deg, #fff0 10vmin, var(--house) calc(10vmin + 1px) 10.5vmin, #fff0 calc(10.5vmin + 1px)), 
		radial-gradient(circle at 50% 87%, #fff0 5.65vmin, var(--house) calc(5.65vmin + 1px)), 
		radial-gradient(circle at 46% 87%, #fff0 5.65vmin, var(--house) calc(5.65vmin + 1px)), 
		linear-gradient(38deg, #fff0 4.25vmin, var(--house) calc(4.25vmin + 1px) 4.75vmin, #fff0 calc(4.75vmin + 1px)), 
		linear-gradient(87deg, #fff0 1vmin, var(--house) calc(1vmin + 1px)), 
		linear-gradient(123deg, #fff0 5vmin, var(--house) calc(5vmin + 1px) 5.5vmin, #fff0 calc(5.5vmin + 1px)), 
		linear-gradient(150deg, #fff0 7vmin, var(--house) calc(7vmin + 1px) 7.5vmin, #fff0 calc(7.5vmin + 1px)),
		linear-gradient(180deg, var(--window), var(--window)), #fff;
	width: 13vmin;
	height: 20vmin;
	bottom: 1.5vmin;
	left: 8vmin;
	transform: skew(2deg, -2deg);
	border-radius: 100% 100% 0.5vmin 0.5vmin;
	background-repeat: no-repeat;
	background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 65%, 100% 64%, 100% 63%, 105% 38%, 105% 38%, 60% 39%, 11% 39%, 58% 39%, 56% 39%;
	background-position: 0 0, 0 0, 0 0, 0 0, 0 100%, 0 100%, 0 100%, 0 0, 0 0, 0 0, 50% 0, 100% 0, 100% 0;
	perspective: 10000vmin;
	perspective-origin: top;
}

.window {
	width: 9vmin;
	height: 18vmin;
	width: 8vmin;
	height: 17vmin;
	background: 
		linear-gradient(178deg, #fff0 0 12vmin, var(--house) calc(12vmin + 1px) 12.4vmin, #fff0 calc(12.4vmin + 1px)), 
		linear-gradient(183deg, #fff0 0 7vmin, var(--house) calc(7vmin + 1px) 7.45vmin, #fff0 calc(7.45vmin + 1px)), 
		linear-gradient(91deg, #fff0 0 3.65vmin, var(--house) calc(3.65vmin + 1px) 4.1vmin, #fff0 calc(4.1vmin + 1px)), 
		linear-gradient(180deg, var(--window), var(--window)), #fff;
	left: 3.5vmin;
	top: 8vmin;
	border-radius: 4vmin 5vmin 0.1vmin 0.1vmin;
	transform: rotateX(-0deg);
	overflow: hidden;
}

.level-1 .window {
	--window: #ff9900cf;
}

.level-1 .window:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: -1vmin;
	max-height: 0;
	background: repeating-linear-gradient(180deg, var(--house) 0 0.5vmin, #fff0 0 0.85vmin);
	transition: max-height 2s var(--bounce) 0s;
	border-bottom: 0.75vmin solid var(--house);
}

.level-1 .window:hover:before {
	max-height: 100%;
	top: -0.75vmin;
	transition: max-height 2s var(--bounce) 0s;
}

.level-2 .window {
	--window: #ff8100cf;
}

.level-2 .window {
	transform: scale(0.75) rotateY(180deg) skewY(-2deg);
	top: 1vmin;
	left: 4.5vmin;
	border-radius: 4vmin 5vmin 0.1vmin 0.1vmin;
	overflow: hidden;
	border-top: 1px solid var(--house);
}

.roof-0 .window {
	--window: #e8ff00cf;
	--window: #084461e0;
	--light: #111;
	border-radius: 100%;
	height: 7vmin;
	width: 7vmin;
	background: linear-gradient(183deg, #fff0 0 3.25vmin, var(--house) calc(3.25vmin + 1px) 3.65vmin, #fff0 calc(3.65vmin + 1px)), linear-gradient(91deg, #fff0 0 3.25vmin, var(--house) calc(3.25vmin + 1px) 3.65vmin, #fff0 calc(3.65vmin + 1px)), linear-gradient(180deg, var(--light), var(--window));
	left: -3vmin;
}

@keyframes light-on {
	0%, 20%, 35% { --window: #084461e0; --light: #111; }
	10%, 30%, 40%, 100% { --window: #ffd5a0cc; --light: #fff5ce; }
	100% { --window: #ffd5a0; --light: #fff5ce; }
}

.chimney {
	left: 21vmin;
	top: 8vmin;
	width: 7vmin;
	height: 12vmin;
}

.chimney:before {
	content: "";
	position: absolute;
	transform: scale(0.25) rotate(2deg);
	left: -7vmin;
	top: -6vmin;
}

.chimney:after {
	content: "";
	position: absolute;
	border: 1.5vmin solid #fff0;
	border-right: 2vmin solid var(--house);
	border-bottom: 3vmin solid var(--house);
	border-top: 0;
	width: 6vmin;
	height: 6vmin;
	left: -4.75vmin;
	bottom: -1.85vmin;
	border-radius: 5vmin 0vmin 6vmin;
}

.fence {
	background: radial-gradient(circle at 55% 32vmin, var(--house) 16vmin, #fff0 calc(16vmin + 1px));
	width: 22vmin;
	height: 22vmin;
	bottom: 0;
	z-index: -1;
}

.fence:before {
	content: "";
	position: absolute;
	width: 2vmin;
	height: 18vmin;
	background: var(--house);
	left: 5vmin;
	top: 5vmin;
	transform: skewY(30deg) rotate(-1deg);
	box-shadow: 8vmin -5vmin 0 -0.25vmin var(--house);
}

.fence:after {
	content: "";
	position: absolute;
	width: 1.75vmin;
	height: 16vmin;
	background: var(--house);
	left: 10vmin;
	top: 4vmin;
	transform: skewY(-20deg) rotate(1deg);
	box-shadow: 5vmin 3vmin 0 0.1vmin var(--house);
}

.fence + .fence {
	right: 0;
}

.fence + .fence:before {
	left: 4vmin;
	top: 6vmin;
	height: 12vmin;
	transform: skewY(30deg) rotate(-7deg);
	box-shadow: 5vmin -2vmin 0 -0.25vmin var(--house);
}

.fence + .fence:after {
	left: 6.5vmin;
	top: 7vmin;
	height: 10vmin;
	transform: skewY(-23deg) rotate(-1deg);
	width: 1.5vmin;
	box-shadow: 5vmin 2vmin 0 -0.25vmin var(--house), 4.75vmin 3vmin 0 -0.25vmin var(--house);
}

.fence span {
	background: var(--house);
	width: 15vmin;
	height: 1.85vmin;
	top: 7vmin;
	left: 3vmin;
	transform: skewX(15deg) rotate(-10deg);
}

.fence span + span {
	width: 15vmin;
	top: 12.25vmin;
	left: 2.5vmin;
	transform: rotate(-8deg) skewX(-18deg);
}

.fence + .fence span {
	width: 11vmin;
	top: 8vmin;
	transform: rotate(3deg) skewX(-4deg);
	height: 2vmin;
	left: 2.5vmin;
}

.fence + .fence span + span {
	top: 12vmin;
	transform: rotate(-4deg) skewX(17deg);
	left: 3.2vmin;
	width: 10.2vmin;
}

.balcony {
	width: 12vmin;
	height: 9vmin;
	background: 
		linear-gradient(-101deg, #fff0 0 1.5vmin, var(--house) calc(1.5vmin + 1px) 2.25vmin, #fff0 calc(2.25vmin + 1px)),
		linear-gradient(-98deg, #fff0 0 5.5vmin, var(--house) calc(5.5vmin + 1px) 6.25vmin, #fff0 calc(6.25vmin + 1px)), 
		linear-gradient(88deg, #fff0 0 4vmin, var(--house) calc(4vmin + 1px) 4.75vmin, #fff0 calc(4.75vmin + 1px)), 
		linear-gradient(85deg, #fff0 0 9vmin, var(--house) calc(9vmin + 1px) 9.75vmin, #fff0 calc(9.75vmin + 1px)), 
		linear-gradient(177deg, #fff0 1vmin, var(--house) calc(1vmin + 1px) 2vmin, #fff0 calc(2vmin + 1px)), 
		linear-gradient(183deg, #fff0 1vmin, var(--house) calc(1vmin + 1px) 2vmin, #fff0 calc(2vmin + 1px));
	z-index: 3;
	left: 43vmin;
	top: 34vmin;
	border-bottom: 2vmin solid var(--house);
	border-right: 0.75vmin solid var(--house);
	border-radius: 0.25vmin;
	transform: skewX(-18deg) rotate(5deg);
	transition: transform 1s var(--bounce) 0s;
	transform-origin: 0 100%;
}

.balcony:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 80%;
	top: -78%;
}

.balcony:hover {
	transform: skewX(-18deg) rotate(25deg);
	transition-duration: 0.5s;
}

.sky {
	background: linear-gradient(0deg, #673ab78a, #3c3c3c94);
	height: 100vh;
	z-index: -1;
	position: absolute;
	left: 0;
}

.sky:after {
	content: "";
	position: absolute;
	width: 100vw;
	height: 100vh;
	top: 0vh;
	background-image: radial-gradient(2px 2px at 20px 30px, #484341, transparent),
		radial-gradient(2px 2px at 43px 75px, #735454, transparent),
		radial-gradient(2px 1px at 54px 184px, #828282, transparent),
		radial-gradient(2px 2px at 93px 47px, #654b49, transparent),
		radial-gradient(1px 1px at 148px 87px, #3a1919, transparent),
		radial-gradient(2px 2px at 193px 137px, #a26662, transparent),
		radial-gradient(1px 2px at 210px 154px, #805241, transparent),
		radial-gradient(2px 2px at 243px 102px, #866356, transparent),
		radial-gradient(2px 1px at 264px 184px, #794937, transparent),
		radial-gradient(2px 2px at 293px 44px, #735454, transparent),
		radial-gradient(1px 1px at 223px 62px, #ad968e, transparent),
		radial-gradient(2px 2px at 249px 162px, #884228, transparent),
		radial-gradient(2px 2px at 73px 99px, #442e26, transparent),
		radial-gradient(1px 1px at 163px 42px, #403433, transparent),
		linear-gradient(180deg, #fff0 10%, var(--house) 25%, #111 50%, #222 75%, #111 100%);
	background-repeat: no-repeat, repeat;
	background-size: 333px 263px, 333px 163px, 333px 163px, 333px 163px,
		333px 163px, 333px 163px, 333px 163px, 333px 163px, 333px 163px, 333px 163px,
		333px 163px, 333px 163px, 333px 163px, 333px 163px, 100% 100%;
	opacity: 0.5;
	mix-blend-mode: color-burn;
}

.moon {
	position: absolute;
	z-index: 2;
	width: 20vmin;
	height: 20vmin;
	left: 20vmin;
	top: 15vmin;
	opacity: 1;
	border-radius: 100%;
	animation: start-moon 3s ease 0s 1;
	background: radial-gradient(circle at 50% 50%,#fdfdfd 0% 7vmin,#ffffff00 7.25vmin 100%),#fff;
	box-shadow: 0 0 8em 4em #6493a9, 0 0 8em -16em #ff660000 inset,0 0 20px 5px #fdfdfd;
}

.moon:before {
	content: "";
	background: radial-gradient(circle at 100% 60%,	#ffffff00 0% 60%, #dddddd 75% 100%);
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0%;
	left: 0%;
	border-radius: 100%;
}

.moon:after {
	content: "";
	background: radial-gradient(circle at 0% 40%,#efefef 0% 60%,#ededed 75% 100%);
	width: 4.5vmin;
	height: 4.5vmin;
	position: absolute;
	top: 20%;
	left: 20%;
	border-radius: 100%;
	filter: blur(2px);
}

.level-2 .window:before {
	content: "";
	position: absolute;
	width: 1.5vmin;
	height: 20vmin;
	background: hsla(0, 100%, 50%, 0.75);
	border-radius: 0 0 1vmin 1vmin;
	top: -22vmin;
	left: 50%;
	z-index: 1;
	transition: all 4s ease-out 0s;
	box-shadow: 
		-1.5vmin -3vmin 0 -0.1vmin hsla(0, 100%, 50%, 0.625), 
		-2.875vmin -2vmin 0 -0.1vmin hsla(0, 100%, 50%, 0.65), 
		-3.875vmin -5.5vmin 0 -0.4vmin hsla(0, 100%, 50%, 0.75), 
		-4.875vmin -4vmin 0 -0.1vmin hsla(0, 100%, 50%, 0.725), 
		1.35vmin -1.5vmin 0 -0.1vmin hsla(0, 100%, 50%, 0.625), 
		2.5vmin -2.5vmin 0 -0.3vmin hsla(0, 100%, 50%, 0.725), 
		3.35vmin -5.5vmin 0 -0.4vmin hsla(0, 100%, 50%, 0.65);
}

.level-2 .window:hover:before {
	top: 0vmin;
	box-shadow: 
		-1.5vmin -1vmin 0 -0.1vmin hsla(0, 100%, 50%, 0.625), 
		-2.875vmin -3vmin 0 -0.1vmin hsla(0, 100%, 50%, 0.65), 
		-3.875vmin -2.5vmin 0 -0.4vmin hsla(0, 100%, 50%, 0.75), 
		-4.875vmin -4vmin 0 -0.1vmin hsla(0, 100%, 50%, 0.725), 
		1.35vmin -2.5vmin 0 -0.1vmin hsla(0, 100%, 50%, 0.625), 
		2.5vmin -1.5vmin 0 -0.3vmin hsla(0, 100%, 50%, 0.725), 
		3.35vmin -3.5vmin 0 -0.4vmin hsla(0, 100%, 50%, 0.65);
}

@keyframes bat-fly {
	25% { transform: translateX(-1.5vmin) translateY(-5vmin) scale(0.6); }
	33% { margin-bottom: 5vmin; }
	50% { margin-bottom: 5vmin; transform: translateX(0.5vmin) scale(0.7);}
	66% { margin-bottom: 5vmin; }
	75% { transform: translateX(1vmin) scale(0.6); }
}

.bat {
	width: 15vmin;
	height: 12vmin;
	bottom: 30vmin;
	margin-bottom: 0;
	left: 13.25vmin;
}

.bat:hover  {
	transition: all 1s linear 0s;
}

.bat .head {
	background: radial-gradient(circle at 50% 100%, #fff0 calc(2vmin - 1px), #5558 calc(2vmin + 0px), var(--bat) calc(2vmin + 2px));
	width: 6vmin;
	height: 9.5vmin;
	left: 4vmin;
	top: 0.75vmin;
	border-radius: 50% 50% 50% 50% / 25% 25% 75% 75%;
	transform: rotate(-173deg);
}

.bat .head:before, 
.bat .head:after {
	background: var(--bat);
	content: "";
	position: absolute;
	width: 0.5vmin;
	height: 2.65vmin;
	bottom: 5vmin;
	left: 5.65vmin;
	border-radius: 100% 100% 100% 0%;
	transform: rotate(-5deg);
}

.bat .head:after {
	left: -0.15vmin;
	border-radius: 100% 100% 0% 100%;
	transform: rotate(1deg);
}

.bat .eyes {
	width: 100%;
	height: 2.5vmin;
	bottom: 2.75vmin;
	transform: rotate(-5deg);
}

.bat .eyes:before, 
.bat .eyes:after {
	content: "";
	position: absolute;
	width: 1.35vmin;
	height: 1.75vmin;
	background: 
		radial-gradient(ellipse at 38% 48%, #fff0 0.3vmin, var(--window) calc(0.3vmin + 1px)), 
		radial-gradient(circle at 43% 60%, #fff 10%, #fff0 calc(10% + 1px) 100%);
	border-radius: 100%;
	left: 3.25vmin;
	top: 0.1vmin;
	animation: eye-blink 7s ease -3.5s infinite;
}

.bat .eyes:after {
	width: 1.65vmin;
	height: 2.25vmin;
	left: 1.25vmin;
	transform: rotateY(180deg);
}

.bat .mouth {
	background: 
		radial-gradient(ellipse at 42% 26%,pink 0.25vmin, #fff0 calc(0.25vmin + 1px)), 
		radial-gradient(ellipse at 36% 4%, #c61727 1vmin, #fff0 calc(1vmin + 1px)), 
		radial-gradient(ellipse at 41% 0%, #c61727 1vmin, #fff0 calc(1vmin + 1px)), 
		radial-gradient(ellipse at 75% 16%, #c61727 1vmin, #fff0 calc(1vmin + 1px)), 
		radial-gradient(circle at 50% 6.5vmin, #fff0 4vmin, #400000 calc(4vmin + 1px));
	width: 4.5vmin;
	height: 3vmin;
	left: 0.65vmin;
	top: 0.75vmin;
	border-radius: 10vmin 10vmin 0 0;
}

.bat .mouth:before, 
.bat .mouth:after {
	content: "";
	position: absolute;
	width: 1vmin;
	height: 2.4vmin;
	background: conic-gradient(from 160deg, #fff0, #fff 5deg 35deg, #fff0 40deg 100%);
	top: 0.1vmin;
	left: 0.75vmin;
	transform: rotate(-10deg);
}

.bat .mouth:after {
	top: 0.2vmin;
	left: 3.1vmin;
	transform: rotate(13deg);
}

.bat .legs {
	width: 7vmin;
	height: 3vmin;
	bottom: 0.1vmin;
	left: 2.65vmin;
}

.bat .leg {
	background: var(--bat);
	width: 0.65vmin;
	height: 2.25vmin;
	transform: rotate(50deg);
	left: 0.75vmin;
	top: -0.25vmin;
	border-radius: 0 0 2vmin 2vmin;
	box-shadow: 0.15vmin -0.5vmin 0 0 var(--bat), -0.15vmin -0.5vmin 0 0 var(--bat);
}

.bat .leg:before, 
.bat .leg:after {
	content: "";
	position: absolute;
	background: var(--bat);
	width: 0.5vmin;
	height: 1.25vmin;
	transform: rotate(-55deg);
	left: 0.45vmin;
	top: 0.65vmin;
	border-radius: 0 0 2vmin 2vmin;
}

.bat .leg:after {
	transform: rotate(55deg);
	left: -0.35vmin;
	top: 0.5vmin;
}

.bat .leg + .leg {
	left: 5.5vmin;
	top: 0.75vmin;
	transform: rotate(-25deg);
}

.bat .wings {
	width: 100%;
	height: 65%;
	z-index: -1;
}

.bat .wings:before, 
.bat .wings:after {
	content: "";
	position: absolute;
	width: 30%;
	height: 70%;
	background: 
		radial-gradient(circle at -2.2vmin 2.2vmin, #fff0 3vmin, var(--bat) calc(3vmin + 1px)),
		radial-gradient(circle at -1.25vmin 2.35vmin, #fff0 3vmin, var(--bat) calc(3vmin + 1px));
	bottom: 2.5vmin;
	left: 1vmin;
	transform-origin: 100% 100%;
	transform: rotate(-150deg);/*-15*/
	border-radius: 0 3.55vmin 0 0;
	background-repeat: no-repeat;
	background-size: 100% 3.2vmin, 100% 2.5vmin;
	background-position: 0 0, 0 3vmin;
}

@keyframes bat-fly-r {
	0%, 100% { transform: rotate(-15deg); }	
	50% { transform: rotate(-50deg); }	
}
@keyframes bat-fly-l {
	0%, 100% { transform: rotate(33deg) rotateY(180deg); }	
	50% { transform: rotate(63deg) rotateY(180deg); }	
}

.bat .wings:after {
	bottom: 2.65vmin;
	left: 3.75vmin;
	top: 0.25vmin;
	transform-origin: 100% 100%;
	transform: rotate(170deg) rotateY(180deg);
	animation-delay: -0.05s;
}

.flying-bat:hover + .fence .bat .wings:before {
	animation: bat-fly-r 0.125s ease 0s infinite;
}

.flying-bat:hover + .fence .bat .wings:after {
	animation: bat-fly-l 0.125s ease 0s infinite;
}

.tomb {
	background: var(--house);
	width: 5vmin;
	height: 6vmin;
	border-radius: 5vmin 5vmin 0 0;
	bottom: 3vmin;
	right: -7vmin;
	right: 0;
	transform: rotateX(12deg) skew(-11deg, 20deg);
	text-align: center;
	color: #3a1752;
	padding-top: 2vmin;
	font-family: serif;
	font-weight: bold;
	transition: all 2s ease 0s;
	z-index: 1;
	cursor: default;
	font-size: 1.75vmin;
}

.tomb:after {
	content: "";
	position: absolute;
	height: 100%;
	width: 5vmin;
	border-right: 1vmin solid var(--house);
	border-top: 0.05vmin solid #fff0;
	border-radius: 0 3vmin 0 0;
	right: -1.2vmin;
	bottom: 0.1vmin;
}

.tomb:hover {
	transform: rotateX(12deg) skew(-11deg, 20deg) rotateX(-13deg);
	transform: rotateX(12deg) skew(-19deg, 25deg) rotateX(-13deg);
	transform-origin: 50% 100%;
}

@keyframes move-witch {
	0% { left: 1.5vmin; }
	25% { bottom: -4vmin}
	50% { left: -5vmin; }
	75% { bottom: 2vmin; }
	100% { left: 1.5vmin; }
}

.witch {
	width: 15vmin;
	height: 18vmin;
	left: -9.5vmin;
	bottom: -0.15vmin;
	opacity: 0.5;
	background: var(--house);
	animation: move-witch 4s ease 0s infinite alternate;
	box-sizing: border-box;
	clip-path: polygon(3% 55%, 5% 55%, 11% 55%, 22% 56%, 24% 57%, 24% 55%, 28% 56%, 34% 53%, 36% 51%, 38% 48%, 41% 42%, 42% 41%, 42% 38%, 43% 36%, 42% 36%, 40% 38%, 40% 38%, 40% 36%, 39% 33%, 38% 33%, 36% 33%, 35% 34%, 35% 33%, 35% 32%, 36% 30%, 37% 29%, 38% 27%, 38% 26%, 34% 23%, 32% 21%, 28% 17%, 27% 14%, 27% 12%, 40% 20%, 45% 17%, 50% 14%, 56% 10%, 59% 8%, 62% 8%, 66% 8%, 64% 9%, 62% 10%, 60% 13%, 58% 15%, 54% 18%, 53% 18%, 52% 24%, 56% 25%, 60% 27%, 64% 27%, 62% 28%, 58% 29%, 56% 30%, 59% 32%, 57% 31%, 56% 33%, 56% 32%, 55% 33%, 57% 33%, 56% 33%, 60% 36%, 56% 36%, 62% 37%, 56% 38%, 56% 40%, 58% 42%, 61% 45%, 64% 48%, 67% 52%, 69% 54%, 70% 56%, 69% 58%, 68% 59%, 70% 60%, 75% 60%, 76% 57%, 77% 56%, 78% 55%, 80% 56%, 80% 56%, 82% 57%, 83% 56%, 87% 56%, 90% 56%, 93% 56%, 96% 55%, 95% 56%, 97% 57%, 98% 60%, 97% 64%, 97% 67%, 96% 70%, 93% 69%, 88% 68%, 85% 67%, 82% 66%, 81% 66%, 80% 67%, 78% 66%, 77% 66%, 76% 66%, 75% 65%, 75% 63%, 74% 62%, 71% 61%, 67% 60%, 66% 61%, 64% 61%, 63% 62%, 64% 65%, 66% 67%, 68% 70%, 70% 72%, 73% 73%, 75% 75%, 78% 77%, 81% 78%, 78% 79%, 76% 80%, 75% 82%, 72% 81%, 71% 82%, 70% 82%, 70% 82%, 69% 81%, 67% 81%, 66% 79%, 65% 79%, 64% 78%, 62% 78%, 58% 78%, 54% 78%, 52% 77%, 51% 77%, 51% 77%, 51% 78%, 51% 79%, 54% 82%, 55% 84%, 56% 86%, 55% 86%, 53% 87%, 52% 89%, 50% 90%, 47% 92%, 47% 92%, 46% 91%, 47% 91%, 48% 90%, 50% 89%, 51% 87%, 51% 84%, 52% 84%, 47% 78%, 44% 75%, 41% 73%, 40% 79%, 41% 83%, 42% 85%, 41% 85%, 40% 84%, 39% 85%, 38% 86%, 36% 88%, 33% 89%, 32% 89%, 34% 87%, 36% 86%, 36% 84%, 36% 83%, 37% 82%, 38% 80%, 38% 74%, 37% 70%, 37% 68%, 36% 67%, 34% 66%, 35% 64%, 36% 62%, 36% 59%, 32% 59%, 29% 58%, 26% 59%, 24% 58%, 22% 57%, 12% 56%, 5% 56%, 3% 55%);
}

.nosferatu {
	width: 10vmin;
	height: 12.5vmin;
	left: -4vmin;
	bottom: -0.15vmin;
	opacity: 0.5;
	background: var(--house);
	box-sizing: border-box;
	clip-path: polygon(75% 100%, 69% 95%, 66% 90%, 62% 87%, 60% 82%, 58% 79%, 57% 75%, 57% 73%, 58% 68%, 59% 67%, 59% 65%, 59% 64%, 59% 62%, 60% 60%, 60% 59%, 61% 58%, 61% 58%, 61% 57%, 62% 55.75%, 67% 54.25%, 70% 53.5%, 73% 52%, 75% 50.75%, 77.5% 50%, 78% 50%, 79.5% 49%, 79.5% 48.75%, 82.5% 47.75%, 83% 47.9%, 84% 48%, 86.25% 49%, 88% 49.5%, 90% 51%, 89% 49%, 88% 48%, 86% 47%, 84% 46%, 83% 46%, 83.5% 45.5%, 85% 45.5%, 88% 46%, 89% 46.5%, 90% 47%, 91% 48%, 91% 49%, 91.5% 47%, 91.5% 47%, 91% 46%, 89% 44.75%, 86% 44%, 83.5% 43.75%, 83% 43.25%, 84.15% 42.75%, 86% 42.75%, 89% 43.65%, 90% 43.75%, 91% 43.75%, 92% 44.25%, 92.5% 45%, 92.5% 46.5%, 93.5% 44%, 92.75% 43%, 90% 41.75%, 88% 40.5%, 85% 39.5%, 84% 39.5%, 82% 39.75%, 81% 40%, 80% 40%, 79% 40.5%, 78% 41%, 77% 41.25%, 76% 41.35%, 74.5% 42.25%, 72% 43%, 69.5% 44%, 70% 43%, 70.5% 42%, 71% 41%, 71.75% 40%, 72% 39%, 71.75% 38%, 71.5% 37%, 72% 36%, 72.2% 35%, 72.5% 33%, 73.25% 32%, 74% 31%, 74% 31%, 75% 30%, 76.5% 28.5%, 78% 30%, 78.5% 30.5%, 79.2% 29%, 79.5% 28%, 79.6% 26%, 79.25% 25%, 79.1% 24%, 80% 23%, 80.2% 22%, 80% 21%, 81% 21%, 81.35% 20.35%, 80.95% 19.75%, 80.5% 19.25%, 80.4% 19%, 80.5% 18.7%, 80.65% 16%, 80.5% 15%, 79.75% 13%, 78.75% 11%, 78% 10%, 76.75% 9%, 74% 7%, 73% 6.25%, 71% 5.35%, 69% 5%, 68% 5%, 67% 5.5%, 66% 6%, 65% 7%, 64.75% 7.5%, 64.5% 7.75%, 64% 7.5%, 63.25% 7.2%, 62% 7%, 61.25% 7.5%, 60.5% 8%, 59.5% 9%, 58.5% 9.5%, 57.5% 9.2%, 56% 9.35%, 55% 9.5%, 52% 9%, 50% 8.9%, 47% 9%, 44% 9.2%, 42.5% 9.65%, 41% 9.25%, 40.5% 9.25%, 39.5% 9.25%, 38.5% 10%, 36.5% 12%, 35.25% 13%, 34% 15%, 33.75% 17%, 33.25% 18%, 32.5% 20%, 30.5% 22%, 29.5% 23%, 27.25% 25%, 27% 25.25%, 25.75% 26%, 24.7% 27%, 23.8% 28%, 23% 28.6%, 22.25% 29.2%, 20.7% 30.8%, 20.1% 31.5%, 20% 32%, 19% 33%, 18% 35%, 17.25% 36%, 17% 37%, 17% 41%, 18% 46%, 18% 49%, 18% 50%, 18% 51%, 19% 57%, 19% 53%, 19% 55%, 18.7% 57%, 18.6% 59%, 19% 61%, 19% 62%, 19.5% 65%, 19.7% 68%, 19.6% 70%, 19.5% 71%, 18% 73%, 17% 74%, 15% 75%, 14% 76%, 12% 77%, 11% 78%, 10% 79%, 9% 80%, 8% 81%, 7% 83%, 7% 84.5%, 8.3% 83%, 9.3% 82%, 10.75% 81%, 12.2% 80%, 14% 79%, 15% 78%, 17% 77.2%, 18% 77.25%, 17.5% 78%, 16.5% 79%, 15.25% 80%, 14.5% 81%, 13.5% 82%, 13% 83%, 12.25% 84%, 11.7% 85%, 11% 86%, 11% 86%, 9.27% 88%, 9% 89%, 9% 90%, 10% 89%, 11.55% 88%, 12.5% 87%, 13.5% 86%, 15.3% 84%, 16% 83%, 18% 81%, 20% 80%, 19.75% 81%, 19.5% 81.25%, 19% 82%, 18% 84%, 16.7% 86%, 15.7% 87%, 15% 88%, 15% 89%, 16% 88%, 18% 87%, 19% 86%, 20% 84%, 21% 83.25%, 22% 82%, 22% 82%, 23% 81%, 26% 76%, 29% 69%, 30% 61%, 29% 57%, 29% 56%, 29% 54%, 28.75% 51%, 29% 48%, 28.8% 46%, 29% 44%, 29.6% 43.5%, 30% 41.5%, 29% 43%, 31% 41%, 32% 40%, 32.8% 39.25%, 34.5% 38.75%, 33.25% 45%, 33% 49%, 32% 53%, 31.8% 55%, 30.2% 59%, 29% 68%, 27% 74%, 25% 80%, 22.65% 85%, 19.85% 91%, 19.5% 93%, 18.25% 96%, 16.75% 100%);    
	animation: move-nosferatu 10s linear(0 0%, 0 1.8%, 0.01 3.6%, 0.03 6.35%, 0.07 9.1%, 0.13 11.4%, 0.19 13.4%, 0.27 15%, 0.34 16.1%, 0.54 18.35%, 0.66 20.6%, 0.72 22.4%, 0.77 24.6%, 0.81 27.3%, 0.85 30.4%, 0.88 35.1%, 0.92 40.6%, 0.94 47.2%, 0.96 55%, 0.98 64%, 0.99 74.4%, 1 86.4%, 1 100%) 0s infinite;
}

@keyframes move-nosferatu {
	0% { left: -4vmin; }
	45% { left: 1.75vmin; }
	50% { bottom: 0; }
	100% { left: -4vmin; }
}

.frankenstein {
	width: 20vmin;
	height: 20vmin;
	left: -6.5vmin;
	bottom: -6.25vmin;
	opacity: 0.5;
	background: var(--house);
	box-sizing: border-box;
	clip-path: polygon(29% 87%, 31% 82%, 32% 82%, 38% 85%, 39% 83%, 41% 81%, 42% 79%, 46% 76%, 49% 68%, 49% 64%, 50% 59%, 51% 57%, 52% 55%, 52% 52%, 50% 51%, 49% 51%, 51% 48%, 52% 45%, 53% 42%, 54% 39%, 54% 38%, 53% 37%, 52% 38%, 51% 40%, 50% 40%, 48% 39%, 46% 37%, 45% 38%, 44% 38%, 43% 38%, 41% 42%, 40% 42%, 40% 40%, 41% 38%, 40% 39%, 38% 40%, 37% 42%, 36% 41%, 36% 41%, 36% 41%, 36% 41%, 35% 40%, 34% 40%, 34% 40%, 35% 38%, 38% 36%, 40% 35%, 43% 34%, 43% 33%, 45% 33%, 47% 32%, 47% 31%, 46% 30%, 43% 30%, 39% 30%, 37% 30%, 37% 32%, 36% 30%, 36% 28%, 36% 28%, 34% 27%, 31% 27%, 30% 27%, 28% 28%, 25% 27%, 24% 27%, 24% 26%, 23% 25%, 22% 25%, 22% 24%, 23% 23%, 23% 23%, 22% 22%, 22% 22%, 24% 22%, 26% 23%, 28% 23%, 29% 23%, 30% 23%, 31% 23%, 33% 24%, 35% 24%, 36% 23%, 37% 23%, 40% 23%, 45% 23%, 50% 23%, 53% 23%, 54% 21%, 55% 21%, 56% 21%, 58% 21%, 60% 21%, 60% 19%, 62% 19%, 62% 17%, 60% 17%, 59% 17%, 58% 16%, 58% 15%, 59% 14%, 58% 13%, 59% 13%, 59% 12%, 59% 11%, 58% 11%, 57% 11%, 57% 10%, 58% 9%, 58% 9%, 59% 8%, 59% 7%, 58% 7%, 58% 6%, 59% 5%, 59% 1%, 60% 0%, 61% 0%, 63% 0%, 64% 1%, 65% 1%, 66% 1%, 67% 2%, 68% 1%, 69% 3%, 70% 2%, 70% 2%, 71% 3%, 72% 3%, 73% 4%, 72% 5%, 72% 8%, 72% 10%, 70% 12%, 71% 14%, 69% 14%, 69% 15%, 69% 15%, 69% 15%, 70% 15%, 70% 16%, 69% 16%, 69% 15%, 68% 16%, 68% 16%, 69% 17%, 69% 17%, 69% 18%, 70% 19%, 72% 20%, 73% 21%, 74% 23%, 74% 24%, 74% 27%, 74% 31%, 74% 34%, 73% 38%, 73% 42%, 73% 45%, 73% 47%, 73% 49%, 73% 50%, 73% 51%, 73% 53%, 73% 54%, 74% 56%, 74% 56%, 72% 57%, 71% 57%, 71% 58%, 70% 61%, 70% 63%, 70% 64%, 71% 66%, 71% 68%, 71% 70%, 70% 71%, 71% 74%, 72% 77%, 73% 81%, 75% 86%, 76% 88%, 76% 89%, 77% 90%, 77% 91%, 77% 93%, 76% 93%, 76% 97%, 72% 98%, 66% 99%, 60% 100%, 59% 98%, 59% 96%, 59% 95%, 59% 94%, 60% 94%, 62% 93%, 64% 93%, 65% 92%, 65% 92%, 64% 91%, 64% 90%, 64% 89%, 64% 87%, 64% 85%, 64% 84%, 63% 82%, 62% 80%, 62% 78%, 61% 76%, 60% 73%, 60% 71%, 58% 73%, 55% 78%, 54% 80%, 52% 84%, 52% 86%, 51% 88%, 49% 89%, 48% 90%, 48% 91%, 46% 94%, 44% 96%, 44% 96%, 43% 96%, 42% 96%, 37% 93%, 31% 90%, 29% 88%);
	animation: move-frankenstein 8s ease 0s infinite alternate;
	transform-origin: 50% 100%;
}

@keyframes move-frankenstein {
	0% { left: -6.5vmin;  }
	20%, 60%, 80% { transform: rotate(5deg)}
	0%, 40%, 70% { transform: rotate(-5deg)}
	45% { left: -5.5vmin; }
	50% { bottom: -5vmin; }
	100% { left: -6.5vmin; }
}

.door:hover .logs {
	transform: rotateX(-50deg) rotateY(-1deg) scaleY(0.8);
}

.logs {
	width: 100%;
	height: 100%;
	bottom: 0;
	transform: rotateX(-40deg) rotateY(-136deg) scaleY(0.8);
	transform-origin: 0 100%;
	transition: transform 1s var(--bounce) 0s;
	filter: contrast(0.99);
	pointer-events: none;
	left: -0.5vmin;
}

.logs span {
	width: 2vmin;
	height: 70%;
	bottom: 0.5vmin;
	background: var(--house);
	left: 1vmin;
	transform: skewY(12deg);
	box-shadow: 8vmin -2.5vmin 0 0 var(--house);
}

.logs span + span {
	width: 1.6vmin;
	left: 3.1vmin;
	bottom: 0.75vmin;
	transform: skewY(-6deg);
	box-shadow: 4vmin 0.75vmin 0 0 var(--house);
}

.logs span + span + span {
	width: 1.75vmin;
	left: 5.1vmin;
	bottom: 1.25vmin;
	transform: skewY(20deg);
	box-shadow: 5.75vmin -1.5vmin 0 -0.25vmin var(--house), -5.75vmin 2.95vmin 0 -0.25vmin var(--house);
}

.logs:before, .logs:after {
	content: "";
	position: absolute;
	background: var(--house);
	width: 100%;
	height: 2vmin;
	bottom: 2vmin;
	transform: skew(-31deg, -3deg);
	left: -0.25vmin;
	box-shadow: -5vmin -8.5vmin 0 0 var(--house);
}

.logs:after {
	width: 12vmin;
	height: 2.5vmin;
	bottom: 6.25vmin;
	transform: skew(13deg, 13deg);
	left: 0.65vmin;
	box-shadow: none;
}

.bat + .chimney {
	left: 24.5vmin;
	top: -19.65vmin;
	transform: rotateY(180deg) rotateZ(29deg);
	transform-origin: -20% 120%;
	z-index: -1;
	width: 6vmin;
	transition: transform 0.25s var(--bounce) 0s;
}

.bat + .chimney:after {
	border-radius: 5vmin 0vmin 8vmin;
	filter: drop-shadow(-1px 0px 1px #fff3);
}

.flying-bat {
	position: absolute;
	width: 15vmin;
	height: 14vmin;
	bottom: 27vmin;
	left: 12vmin;
	z-index: 1;
}

.flying-bat:hover + .fence .bat {
	animation: bat-fly 4s linear 0s infinite; 
}

.flying-bat:hover + .fence .chimney {
	transform: rotateY(180deg) rotateZ(22deg); 
	transition: transform 1s var(--bounce) 0s;
}

.phantom {
	background: 
		radial-gradient(circle at 60% 23%, #0e1d24 0.25vmin, #fff0 calc(0.25vmin + 1px)),
		radial-gradient(circle at 35% 25%, #0e1d24  0.25vmin, #fff0 calc(0.25vmin + 1px)), #ffffff10;
	width: 3vmin;
	height: 5vmin;
	border-radius: 2vmin 2vmin 0 0;
	left: 1vmin;
	top: 1vmin;
	transform: skew(10deg, -10deg);
	clip-path: polygon(1% 99%, 0% 1%, 99% 0%, 100% 99%, 94% 99%, 90% 96%, 88% 92%, 85% 90%, 82% 88%, 81% 90%, 79% 93%, 78% 96%, 78% 100%, 72% 99%, 71% 95%, 71% 93%, 68% 90%, 64% 87%, 63% 86%, 61% 89%, 60% 91%, 59% 92%, 58% 93%, 57% 96%, 55% 97%, 53% 98%, 50% 95%, 49% 92%, 49% 91%, 48% 89%, 45% 86%, 43% 85%, 40% 89%, 40% 90%, 39% 92%, 38% 95%, 37% 96%, 34% 97%, 31% 98%, 30% 95%, 29% 93%, 29% 92%, 28% 90%, 25% 87%, 22% 87%, 20% 88%, 20% 90%, 19% 93%, 19% 95%, 18% 96%, 16% 98%, 14% 99%, 13% 97%, 11% 97%, 11% 95%, 10% 93%, 8% 93%, 5% 96%, 4% 97%, 4% 99%, 4% 99%, 0% 100%);

clip-path: polygon(6% 90%, 4% 66%, 3% 56%, 3% 48%, 5% 35%, 9% 22%, 15% 13%, 22% 8%, 30% 4%, 36% 3%, 42% 3%, 48% 4%, 56% 6%, 56% 8%, 63% 9%, 63% 9%, 70% 13%, 73% 17%, 78% 24%, 81% 28%, 85% 36%, 85% 38%, 88% 44%, 91% 51%, 93% 62%, 95% 74%, 97% 88%, 96% 89%, 93% 88%, 90% 87%, 84% 88%, 77% 90%, 72% 91%, 67% 93%, 63% 92%, 59% 92%, 56% 91%, 53% 90%, 50% 91%, 45% 94%, 41% 96%, 38% 96%, 32% 96%, 27% 94%, 19% 96%, 13% 97%, 9% 98%, 7% 99%, 5% 98%, 4% 96%, 4% 96%, 4% 93%);
	animation: move-phantom 2s ease 0s infinite alternate;
}

@keyframes move-phantom {
	0% { left: 0.5vmin; transform: skew(10deg, -10deg) }
	20%, 60%, 80% { transform: rotate(8deg) skew(10deg, -10deg); }
	0%, 40%, 70% { transform: rotate(-7deg) skew(10deg, -10deg); }
	45% { left: 3.5vmin; }
	50% { bottom: -5vmin; }
	100% { left: 0.5vmin; transform: skew(10deg, -10deg) }
}

@keyframes move-phantom-2 {
	0% { left: 0.5vmin; transform: skew(10deg, -10deg) rotateY(180deg);}
	20%, 60%, 80% { transform: rotate(8deg) skew(10deg, -10deg) rotateY(180deg); }
	0%, 40%, 70% { transform: rotate(-7deg) skew(10deg, -10deg) rotateY(180deg); }
	45% { left: 3.5vmin; }
	50% { bottom: -5vmin; }
	100% { left: 0.5vmin; transform: skew(10deg, -10deg) rotateY(180deg); }
}

.phantom + .phantom {
	transform: skew(-7deg, 9deg) rotateY(180deg);
	animation-delay: -1s;
	animation-direction: reverse;
	animation-duration: 2.1s;
	margin-top: -0.25vmin;
	width: 3.5vmin;
	height: 5.5vmin;
	animation: move-phantom-2 2.03s ease -1s infinite alternate;
}

.roof-0 .window:hover {
	animation: light-on 0.75s linear 0s 1;
	animation-fill-mode: forwards;
}

.roof-0 .window:hover .phantom {
	opacity: 0.15;
}

.zombie-hand {
	width: 5vmin;
	height: 8vmin;
	left: 12.75vmin;
	bottom: -2vmin;
	clip-path: polygon(24% 99%, 30% 77%, 32% 69%, 33% 66%, 34% 60%, 32% 56%, 27% 54%, 25% 52%, 22% 44%, 22% 39%, 21% 37%, 16% 36%, 15% 38%, 11% 38%, 6% 36%, 5% 34%, 7% 32%, 10% 32%, 12% 31%, 14% 31%, 16% 32%, 20% 32%, 25% 33%, 28% 33%, 29% 32%, 30% 30%, 28% 28%, 25% 27%, 23% 27%, 20% 27%, 17% 27%, 16% 26%, 17% 24%, 18% 22%, 19% 20%, 24% 20%, 28% 21%, 33% 22%, 35% 24%, 36% 27%, 38% 28%, 42% 26%, 42% 24%, 41% 21%, 38% 20%, 33% 17%, 31% 16%, 28% 16%, 26% 15%, 27% 12%, 29% 11%, 33% 12%, 36% 12%, 37% 13%, 39% 13%, 42% 15%, 45% 17%, 48% 19%, 49% 20%, 50% 23%, 53% 25%, 53% 23%, 53% 21%, 52% 18%, 52% 16%, 52% 14%, 48% 12%, 46% 9%, 44% 6%, 45% 5%, 48% 4%, 49% 4%, 52% 5%, 54% 7%, 58% 9%, 59% 10%, 60% 11%, 61% 13%, 63% 17%, 64% 18%, 66% 19%, 67% 21%, 67% 23%, 67% 25%, 66% 29%, 66% 32%, 68% 34%, 68% 35%, 70% 37%, 72% 37%, 74% 34%, 76% 33%, 77% 32%, 76% 31%, 76% 30%, 77% 27%, 81% 23%, 85% 21%, 88% 21%, 92% 21%, 93% 21%, 94% 21%, 94% 22%, 92% 24%, 92% 25%, 91% 27%, 90% 28%, 92% 29%, 92% 30%, 93% 31%, 94% 33%, 94% 34%, 91% 35%, 89% 36%, 88% 38%, 85% 39%, 84% 42%, 84% 43%, 83% 45%, 80% 47%, 75% 48%, 72% 50%, 68% 53%, 66% 56%, 64% 61%, 64% 65%, 63% 69%, 64% 73%, 64% 76%, 66% 99%);
	background: var(--house);
	transform-origin: 75% 100%;
	transform: rotate(10deg);
	transition: bottom 1s ease 0s;
}

.tomb:hover + .zombie-hand {
	animation: move-zombie 0.25s ease 0s infinite;
	animation-fill-mode: forwards;
	bottom: 5.25vmin;
	transition: bottom 3s ease 0.25s;
}

@keyframes move-zombie {
	0%, 50%, 100% { left: 12.75vmin;} 
	50% { margin-bottom: 0.15vmin;}  
	25%, 75% { left: 12.85vmin;}
}

.tomb:hover + .zombie-hand + .stones:before,
.tomb:hover + .zombie-hand + .stones:after {
	content: "";
	position: absolute;
	width: 0.5vmin;
	height: 0.75vmin;
	top: 0vmin;
	border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
	background: var(--house);
	animation: move-stone-1 2s ease-out 0s;
	animation-fill-mode: forwards;
}

.tomb:hover + .zombie-hand + .stones:after {
	animation: move-stone-2 2s ease-out 0.5s;
	animation-fill-mode: forwards;
	transform: rotateZ(180deg);
}

.tomb:hover + .zombie-hand + .stones {
	bottom: 3vmin;
}

.stones {
	right: 1.75vmin;
	bottom: -3vmin;
	width: 8vmin;
	height: 8vmin;
	transform: rotate(45deg);
	transition: bottom 1.5s ease 0s;
	border-radius: 0 5vmin;
	z-index: -3;
	pointer-events: none;
}

@keyframes move-stone-1 {
	10% { top: 1vmin; left: 0.25vmin;}
	20% { top: 2vmin; left: 0.5vmin; }
	30% { top: 3vmin; left: 1vmin; }
	50% { top: 5vmin; left: 2.5vmin; transform: rotate(0deg); }
	60%, 100% { top: 6vmin; left: 2.5vmin; transform: rotate(30deg);}
}

@keyframes move-stone-2 {
	10% { left: 1vmin;}
	20% { left: 2vmin; }
	30% { left: 3vmin; top: 0.75vmin; }
	50% { left: 5vmin; top: 2.25vmin; transform: rotate(0deg); }
	60%, 100% { left: 5.25vmin; top: 4.5vmin; transform: rotate(30deg);}
}

.bat-cat {
	width: 80vmin;
	height: 40vmin;
	animation: fly-move 1s ease 0s 1;
	z-index: 2;
	transform: scale(0.2);
	left: 18vmin;
	top: 12vmin;
}

@keyframes fly {
	25% { transform: translateX(1vmin) scale(0.2); }
	33% { margin-top: -1vmin; }
	0%, 50%, 100% { transform: translateX(0vmin) scale(0.2); }
	66% { margin-top: 1vmin; }
	75% { transform: translateX(2vmin) scale(0.2); }
}

@keyframes fly-move {
	25% { transform: translateX(-0.5vmin) scale(0.2); }
	53% { margin-top: 0.5vmin; }
	86% { margin-top: -0.5vmin; }
	75% { transform: translateX(0.5vmin) scale(0.2); }
}

.bat-cat * {
	position: absolute;
	box-sizing: border-box;
}

.balcony:hover + .bat-cat {
	animation: fly 1.5s ease 0s infinite;
}

.bat-cat .body {
	width: 20vmin;
	height: 20vmin;
	background: var(--black);
	border-radius: 1vmin 100%;
	top: 15vmin;
	left: 30vmin;
	transform: rotate(45deg) skew(-5deg, -5deg);
	box-shadow: 1vmin -0.15vmin 0 0 var(--gray) inset;
	z-index: 2;
	transition: all 1s ease 0s;
	border-radius: 8vmin 100%;
	top: 16.5vmin;
}

.balcony:hover + .bat-cat .body {
	border-radius: 1vmin 100%;
	top: 15vmin;
}

.bat-cat .head {
	width: 14vmin;
	height: 13vmin;
	background: var(--black);
	border-radius: 90% 90% 100% 100%;
	top: 7.25vmin;
	left: 33vmin;
	box-shadow: 1.2vmin 0.5vmin 0 0 inset var(--gray);
	z-index: 3;
}

.bat-cat .head:before,
.bat-cat .head:after {
	content: "";
	position: absolute;
	width: 3.75vmin;
	height: 4.25vmin;
	background: radial-gradient(circle at 60% 50%, var(--house) 1.15vmin, #fff0 calc(1.15vmin + 1px)), #fff;
	border-radius: 100%;
	bottom: 4vmin;
	left: 2.15vmin;
	transform: rotate(-10deg);
	animation: eye-blink 5s ease 0s infinite;
}

@keyframes eye-blink {
	0%, 95% { max-height: 4.25vmin; bottom: 4vmin; }
	100% { max-height: 0.25vmin; bottom: 5vmin; }

}

.bat-cat .head::after {
	transform: rotate(10deg) rotateY(180deg);
	left: 8vmin;
}

.ears {
	width: 18.25vmin;
	height: 15vmin;
	left: 31vmin;
	top: 2vmin;
}

.ears:before,
.ears:after {
	content: "";
	position: absolute;
	width: 13vmin;
	height: 13vmin;
	left: -2.1vmin;
	top: 1.5vmin;
	background: var(--black);
	border-radius: 0.5vmin 100%;
	transform: skew(-5deg, -5deg) rotate(19deg);
	box-shadow: 1.25vmin -0.2vmin 0 0 var(--gray) inset;
}

.ears:after {
	left: 7vmin;
	transform: rotate(69deg) skew(-5deg, -5deg);
	box-shadow: 0.125vmin -1.5vmin 0 0 var(--gray) inset;

}

.bat-cat .wings {
	width: 80vmin;
	height: 40vmin;
	z-index: -1;
}

.bat-cat .wing {
	background: #ffc10700;
	width: 40vmin;
	height: 23vmin;
	top: 8vmin;
	transform-origin: 90% 50%;
	opacity: 1;
	animation: stop-fly-right 1s linear 0s 1;
	animation-fill-mode: forwards;

}

.bat-cat .wing + .wing {
	transform: rotateY(180deg);
	left: 7vmin;
	animation: stop-fly-left 1s linear 0s 1;
	animation-fill-mode: forwards;
}

.balcony:hover + .bat-cat .wing {
	opacity: 1;
	transition: opacity 0.5s ease 0s;
	animation: fly-right 0.15s ease 0s infinite;
}

.balcony:hover + .bat-cat .wing + .wing {
	animation-name: fly-left;
}

@keyframes fly-right {
	49% { transform: rotate(-25deg); }    
}

@keyframes fly-left {
	51% { transform: rotateY(180deg) rotate(-25deg); }  
}

@keyframes stop-fly-right {
	90% { opacity: 1;}
	100% { transform: rotateZ(-90deg) scaleX(0.5) scaleY(0.75); opacity: 0; }
}

@keyframes stop-fly-left {
	90% { opacity: 1;}
	100% { transform: rotateY(180deg) rotateZ(-90deg) scaleX(0.5) scaleY(0.75); opacity: 0; }
}

.finger {
	border-radius: 3vmin 5vmin;
	width: 0vmin;
	height: 22vmin;
	background: #f002;
	transform: rotate(68deg);
	top: -6vmin;
	left: 11vmin;
	border: 0.85vmin solid var(--black);
	background: var(--black);
	z-index: 2;
}

.finger + .finger {
	transform: rotate(28deg);
	top: 0vmin;
	left: 16vmin;
	height: 19vmin;
}

.finger + .finger + .finger {
	transform: rotate(-9deg);
	top: 0vmin;
	left: 23vmin;
	height: 23vmin;
}

.finger + .finger + .finger + .finger {
	transform: rotate(-50deg);
	top: -3.75vmin;
	left: 29vmin;
	height: 23vmin;
}

.finger:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	border: 0.85vmin solid var(--black);
	border-radius: 100%;
}

.membrane {
	background: radial-gradient(circle at 38% 126%, #fff0 10vmin, var(--dark) calc(10vmin + 1px));
	width: 13vmin;
	height: 20vmin;
	transform: rotate(29deg);
	left: 5vmin;
	top: -3vmin;
	clip-path: polygon(100% 0%, 0% 80%, 100% 93%);
}

.membrane + .membrane {
	left: 16vmin;
	transform: rotate(30deg) rotateY(180deg);
	top: 3.5vmin;
}

.membrane + .membrane + .membrane {
	left: 24.5vmin;
	transform: rotate(-8deg) rotateY(180deg);
	top: 2.5vmin;
	clip-path: polygon(97% 0%, -50% 100%, 100% 100%);
	background: radial-gradient(circle at 70% 141%, #fff0 10vmin, var(--dark) calc(10vmin + 1px));
}

.bat-cat .leg {
	height: 5vmin;
	background: var(--black);
	box-shadow: 0.75vmin 0 0 0 var(--gray) inset;
	transition: all 0.4s ease 0.25s;
	width: 6vmin;
	border-radius: 1vmin 1vmin 2.5vmin 2.5vmin;
	left: 34vmin;
	top: 32.5vmin;
	z-index: 1;
	transform: rotate(5deg);
}

.bat-cat .leg + .leg {
	border-radius: 2vmin 1vmin;    
	left: 41vmin;
	transform: rotate(-5deg);
}

.balcony:hover + .bat-cat .leg {
	z-index: 1;
	width: 2vmin;
	height: 5vmin;
	background: var(--black);
	top: 35vmin;
	left: 37vmin;
	transform: rotate(15deg);
	border-radius: 1vmin 2vmin;
	box-shadow: 0.75vmin 0 0 0 var(--gray) inset;
	transition: all 0.4s ease 0.25s;
}

.balcony:hover + .bat-cat .leg + .leg {    
	left: 41vmin;
	border-radius: 2vmin 1vmin;
	transform: rotate(-13deg);
}

.bat-cat .leg:before {
	content: "";
	width: 2vmin;
	height: 4vmin;
	background: var(--black);
	top: 3.25vmin;
	transform-origin: 50% 0;
	left: -0.35vmin;
	border-radius: 1vmin 3vmin 3vmin 1vmin;
	border-left: 1.1vmin solid var(--gray);
	transition: all 0.4s ease 0.25s;
	position: absolute;
	transform: rotate(-160deg); 
	opacity: 0;
}

.bat-cat .leg + .leg:before {
	top: 3.25vmin;
	left: 0.25vmin;
	transform: rotate(18deg);
	border-radius: 3vmin 1vmin 1vmin 3vmin;
	border-left: 0;
	background: var(--gray);
	border-right: 1.35vmin solid var(--black);
	border-top: 1px solid var(--black);
}

.balcony:hover + .bat-cat .leg:before {
	transform: rotate(-25deg);
	opacity: 1;
	width: 1vmin;
}

.balcony:hover + .bat-cat .leg + .leg:before {
	transform: rotate(18deg);
}

.tail {
	width: 10vmin;
	height: 11vmin;
	border-radius: 1vmin 9vmin;
	left: 30vmin;
	top: 24vmin;
	transform: rotate(23deg);
	transform-origin: 100% 100%;
	border: 1vmin solid #fff0;
	border-bottom: 1vmin solid var(--black);
	border-left: 1.55vmin solid var(--black);
	filter: drop-shadow(-0.25vmin 0vmin 0px var(--gray)) drop-shadow(-0.25vmin 0vmin 0px var(--gray));
	z-index: 1;
	left: 25vmin;
	animation: tail-move 2s ease-in-out 0s infinite alternate;
	transition: all 0.4s ease 0.5s;
}

.tail:before {
	content: "";
	width: 2vmin;
	height: 2vmin;
	background: var(--black);
	border-radius: 3vmin 1vmin;
	left: -1.75vmin;
	top: -1.125vmin;
	transform: rotate(-36deg);
}

.balcony:hover + .bat-cat .tail {
	left: 30vmin;
	animation: none;
	transition-delay: 0s;
}

@keyframes tail-move {
	20% { transform: rotate(11deg); }
	72% { transform: rotate(7deg); }

}

.shining {
	width: 28.75vmin;
	height: 2vmin;
	left: -28.8vmin;
	top: 0.015vmin;
	transform: rotate(-49.3deg);
	transform-origin: 100% 0;
	border-radius: 0 0 2.5vmin 500%;
	box-shadow: 0.5vmin 0.5vmin 0.5vmin 0 #fff2 inset;
}

.door + .shining {
	transform: rotate(-90deg);
	filter: blur(2px);
	width: 21.5vmin;
	left: -21.5vmin;
}

.level-1 .shining {
	transform: rotate(-91deg);
	filter: blur(4px);
}

.level-2 .shining {
	transform: rotate(-91deg);
	filter: blur(5px);
}

@keyframes floating-down {
	0% { margin-bottom: 0vmin; margin-left: 0vmin}
	25% { margin-bottom: 2vmin; }
	33% {  margin-left: -3vmin; }
	66% {  margin-left: 1vmin; }
	75% { margin-bottom: 1vmin; }
	100% { margin-bottom: 0vmin; margin-left: 0vmin; }
}

@keyframes floating {
	0% { margin-bottom: 4vmin; margin-left: 0vmin}
	33% { margin-left: -4vmin; }
	66% { margin-left: 1vmin; }
	100% { margin-bottom: -4vmin; margin-left: 0vmin; }
}

@keyframes swinging-left {
	0% { transform: rotate(-5deg); }
	100% { transform: rotate(5deg); }
}

@keyframes swinging-right {
	0% { transform: rotateY(180deg) rotate(5deg); }
	100% { transform: rotateY(180deg) rotate(-5deg); }
}

.skeleton {
	--bone: var(--house);
	opacity: 0.965;
	width: 32vmin;
	height: 60vmin;
	position: absolute;
	z-index: 1;
	display: flex;
	justify-content: center;transition: var(--tran);
	transform: scale(0.375);
	left: -7vmin;
	bottom: -19.5vmin;
	transition: all 1s ease 0s;
	animation: floating-down 2s cubic-bezier(0.46, 0.03, 0.52, 0.96) 0s 1;
}

.skeleton * {
	animation-play-state: paused !important;
}

.skeleton-floating:hover + .skeleton * {
	animation-play-state: running !important;
}

.skeleton-floating:hover + .skeleton {
	animation: floating 3s cubic-bezier(0.46, 0.03, 0.52, 0.96) 0s infinite alternate;
	bottom: -6vmin;
}

.skeleton div {
	position: absolute;
}

.skeleton-floating {
	width: 8vmin;
	height: 20vmin;
	bottom: 0vmin;
	left: 5vmin;
	z-index: 3;
}

@keyframes shadow {
	0% { margin-left: 2vmin; }
	100% { margin-left: -2vmin; }
}

.skeleton .head {
	width: 13vmin;
	height: 17vmin;
	top: 4.25vmin;
	animation: swinging-right 0.55s ease-in-out 0s infinite alternate;
	transform-origin: 50% 75%;
}

.cranium {
	width: 12vmin;
	height: 13vmin;
	left: 0.5vmin;
	top: 0.25vmin;
	border-radius: 6vmin 6vmin 4.5vmin 4.5vmin;
	background: 
		radial-gradient(circle at 50% 74%, #fff0 9vmin, #fff6 100%), 
		conic-gradient(from -24deg at 100% 75%, var(--bone) 0 45deg, #fff0 0 100%), 
		conic-gradient(from -24deg at 0% 75%, var(--bone) 0 45deg, #fff0 0 100%), 
		conic-gradient(from -24deg at 50% 75%, var(--bone) 0 45deg, #fff0 0 100%), 
		linear-gradient(180deg, var(--bone) 0 59%, #fff0 0 90%, var(--bone) 0 100%), 
		radial-gradient(circle at 75% 73%, #fff0 0 1.75vmin, var(--bone) calc(1.75vmin + 1px) 3vmin, #fff0 0 100%), 
		radial-gradient(circle at 25% 73%, #fff0 0 1.75vmin, var(--bone) calc(1.75vmin + 1px) 3vmin, #fff0 0 100%);
}

.skeleton-floating:hover + .skeleton .cranium {
	box-shadow: 0 1vmin 1vmin 0 #fff2 inset;
}

.cranium:before {
	content: "";
	position: absolute;
	width: 1.25vmin;
	height: 1.25vmin;
	bottom: -0.75vmin;
	left: 4.85vmin;
	background: var(--bone);
	border-radius: 100%;
	box-shadow: 1.25vmin 0 0 0 var(--bone);
}

.cranium:after {
	content: "";
	position: absolute;
	width: 5.25vmin;
	height: 1.5vmin;
	bottom: -0.95vmin;
	left: 3.5vmin;
	background: 
		radial-gradient(circle at 90% 10%, var(--bone) 0 1vmin, #fff0 calc(1vmin + 1px) 100%), 
		radial-gradient(circle at 10% 10%, var(--bone) 0 1vmin, #fff0 calc(1vmin + 1px) 100%);
	border-radius: 1vmin;
}

.skeleton .mouth {
	border-radius: 100%;
	border: 0.5vmin solid #fff0;
	box-sizing: border-box;
	border-bottom-color: var(--bone);
	border-width: 0.75vmin;
	width: 11.75vmin;
	left: 0.6vmin;
	height: 15vmin;
	top: 0.85vmin;
	background: 
		radial-gradient(circle at 35% 98%, var(--bone) 0 0.65vmin, #fff0 calc(0.65vmin + 1px) 100%), 
		radial-gradient(circle at 45% 100%, var(--bone) 0 0.65vmin, #fff0 calc(0.65vmin + 1px) 100%), 
		radial-gradient(circle at 55% 100%, var(--bone) 0 0.65vmin, #fff0 calc(0.65vmin + 1px) 100%), 
		radial-gradient(circle at 65% 98%, var(--bone) 0 0.65vmin, #fff0 calc(0.65vmin + 1px) 100%);
	background-repeat: no-repeat;
}

.skeleton .mouth:before, 
.skeleton .mouth:after {
	content: "";
	position: absolute;
	border-radius: 100%;
	background: var(--bone);
	width: 0.75vmin;
	height: 0.75vmin;
	left: 1.1vmin;
	bottom: 1vmin;
}

.skeleton .mouth:after {
	left: 8.45vmin;
}

.neck {
	width: 4vmin;
	height: 3vmin;
	top: 20vmin;
	margin-left: -0.25vmin;
}

.torso {
	width: 10vmin;
	height: 16vmin;
	top: 21.5vmin;
	margin-left: -0.25vmin;
	z-index: 2;
}

.pelvis {
	background: 
		radial-gradient(circle at 82% 36%, #fff0 0.5vmin, var(--bone) calc(0.5vmin + 1px) 4vmin, #fff0 0 100%), 
		radial-gradient(circle at 19% 36%, #fff0 0.5vmin, var(--bone) calc(0.5vmin + 1px) 4vmin, #fff0 0 100%);
	width: 8.5vmin;
	height: 4.5vmin;
	bottom: -1.5vmin;
	left: 0.9vmin;
	clip-path: polygon(9% 14%, 13% 10%, 19% 8%, 25% 10%, 29% 12%, 32% 15%, 34% 17%, 38% 18%, 46% 20%, 51% 20%, 58% 20%, 64% 20%, 71% 16%, 75% 11%, 81% 7%, 86% 8%, 91% 12%, 95% 19%, 97% 29%, 97% 42%, 95% 50%, 93% 56%, 92% 61%, 92% 69%, 92% 76%, 89% 86%, 86% 91%, 81% 94%, 78% 94%, 72% 90%, 67% 85%, 62% 79%, 57% 73%, 53% 67%, 49% 66%, 45% 68%, 41% 74%, 36% 84%, 31% 90%, 26% 94%, 20% 96%, 15% 93%, 12% 89%, 11% 84%, 10% 78%, 10% 72%, 10% 66%, 9% 59%, 7% 54%, 5% 45%, 4.5% 36%, 5% 30%, 6% 23%);
}

.column {
	width: 1.5vmin;
	height: 8.75vmin;
	background: var(--bone);
	border-radius: 0.25vmin;
	left: 4.45vmin;
	top: 2.5vmin;
}

.column:before, .column:after {
	content: "";
	position: absolute;
	background: var(--bone);
	border-radius: 0.25vmin;
	width: 100%;
	height: 1vmin;
	top: -1.25vmin;
	box-shadow: 0 -1.125vmin 0 0 var(--bone), 0 -2.25vmin 0 0 var(--bone);
}

.column:after {
	top: 10vmin;
}

.rib {
	width: 8.5vmin;
	height: 2.75vmin;
	left: 1vmin;
	top: 9vmin;
}

.rib:before, .rib:after {
	content: "";
	position: absolute;
	width: 2.5vmin;
	height: 0.5vmin;
	background: #f0f0;
	border-radius: 100%;
	left: 0.3vmin;
	top: 0vmin;
	border: 0.85vmin solid var(--bone);
	border-top-color: #fff0;
	filter: drop-shadow(0px -1.5vmin 0 var(--bone)) drop-shadow(0px -1.5vmin 0 var(--bone)) drop-shadow(0px -1.5vmin 0 var(--bone));
}

.rib:after {
	left: 4vmin;
}

.rib + .rib {
	top: 2.5vmin;
}

.rib + .rib:before, .rib + .rib:after {
	filter: none;
	width: 1.85vmin;
	left: 1vmin;
}

.rib + .rib:after {
	left: 4vmin;
}

.clavicle {
	width: 11vmin;
	height: 2.75vmin;
	left: -0.25vmin;
	top: 0vmin;
}

.clavicle:before, .clavicle:after {
	content: "";
	position: absolute;
	width: 2.75vmin;
	height: 0.1vmin;
	border-radius: 100%;
	left: -0.15vmin;
	top: 1.25vmin;
	border: 0.95vmin solid var(--bone);
	border-bottom-color: #fff0;
	transform: rotate(-12deg);
}

.clavicle:after {
	left: 6.35vmin;
	transform: rotate(12deg);
}

.arms {
	width: 28vmin;
	height: 18vmin;
	top: 22.5vmin;
	z-index: 2;
}

.arm {
	width: 3.4vmin;
	height: 20vmin;
	transform: rotate(3deg);
	left: 7.25vmin;
	top: -0.5vmin;
	transform-origin: 50% 1vmin;
	animation: swinging-left 0.55s ease-in-out 0s infinite alternate;
}

.arm + .arm {
	transform: rotateY(180deg) rotate(3deg);
	left: 17.25vmin;
	animation: swinging-right 0.55s ease-in-out 0s infinite alternate;
	transform-origin: 55% 1vmin;
}

.hand {
	width: 5.5vmin;
	height: 6vmin;
	bottom: 0;
	left: -2.1vmin;
	z-index: -1;
}

.skeleton .legs {
	width: 15vmin;
	height: 21vmin;
	top: 37.5vmin;
	z-index: -1;
	margin-left: -0.2vmin;
}

.skeleton .leg {
	width: 4.25vmin;
	height: 19vmin;
	transform: rotate(3deg);
	left: 2.65vmin;
	top: -1vmin;
	border-radius: 1px 1px 30% 40%;
	transform-origin: 50% 1vmin;
	animation: swinging-left 0.55s ease-in-out 0s infinite alternate;
}

.skeleton .leg + .leg {
	transform: rotateY(180deg) rotate(3deg);
	left: 8vmin;
	animation: swinging-right 0.55s ease-in-out 0s infinite alternate;
	transform-origin: 55% 1vmin;
}

.foot {
	width: 7vmin;
	height: 4vmin;
	top: 20.5vmin;
	left: -2.5vmin;
	transform: rotate(-35deg);
	transform-origin: 1vmin 50%;
}

.bone {
	background: var(--bone);
	width: 1vmin;
	height: 5vmin;
}

.bone:before, .bone:after {
	content: "";
	background: var(--bone);
	width: 1vmin;
	height: 1vmin;
	position: absolute;
	left: -0.5vmin;
	top: -0.5vmin;
	border-radius: 100%;
	box-shadow: 1vmin 0 0 0 var(--bone);
}

.bone:after {
	top: calc(100% - 0.5vmin);
}

.arm .bone {
	top: 3.125vmin;
	left: 1.25vmin;
}

.arm .bone + .bone {
	top: 9.125vmin;
	left: 1.2vmin;
	width: 0.5vmin;
	box-shadow: 0.65vmin 0 0 0 var(--bone);
}

.hand .bone {
	width: 1.75vmin;
	height: 1.25vmin;
	border-radius: 100%;
	box-shadow: 0.65vmin 0 0 0 var(--bone);
	top: 0.75vmin;
	left: 2.25vmin;
}

.hand .bone:before, .hand .bone:after {
	top: 1.325vmin;
	left: -0.35vmin;
	width: 1.25vmin;
	box-shadow: 1.5vmin 0 0 0 var(--bone);
}

.hand .bone + .bone {
	width: 0.5vmin;
	height: 1vmin;
	border-radius: 100%;
	box-shadow: 0 1.1vmin 0 -0.05vmin var(--bone);
	top: 0.8vmin;
	left: 1.35vmin;
	transform: rotate(50deg);
}

.hand .bone + .bone:before, 
.hand .bone + .bone:after {
	display: none;
}

.hand .bone + .bone + .bone {
	width: 0.5vmin;
	height: 1vmin;
	box-shadow: 0 1.1vmin 0 -0.09vmin var(--bone);
	top: 3vmin;
	left: 1.4vmin;
	transform: rotate(6deg);
}

.hand .bone + .bone + .bone + .bone {
	top: 3.25vmin;
	left: 2.35vmin;
}

.hand .bone + .bone + .bone + .bone + .bone {
	top: 3.25vmin;
	left: 3.25vmin;
	transform: rotate(0deg);
}

.hand .bone + .bone + .bone + .bone + .bone + .bone {
	top: 3.25vmin;
	left: 4.25vmin;
	transform: rotate(0deg);
	width: 0.45vmin;
	height: 0.75vmin;
	box-shadow: 0 0.8vmin 0 -0.09vmin var(--bone);
}

.leg .bone {
	left: 1.75vmin;
	top: 3vmin;
	height: 6.5vmin;
}

.leg .bone + .bone {
	left: 1.75vmin;
	top: 11.75vmin;
	height: 6.75vmin;
	width: 0.5vmin;
	box-shadow: 0.65vmin 0 0 0 var(--bone);
}

.leg .bone.ball {
	width: 1.25vmin;
	height: 1.25vmin;
	top: 10vmin;
	border-radius: 100%;
	box-shadow: none;
}

.leg .bone.ball:before, .leg .bone.ball:after {
	display: none;
}

.foot .bone {
	width: 2.2vmin;
	height: 1.5vmin;
	border-radius: 1vmin 0.75vmin 1vmin 1vmin;
	top: 1.2vmin;
	left: 4vmin;
	transform: rotate(-15deg);
}

.foot .bone + .bone {
	width: 1vmin;
	height: 0.95vmin;
	top: 2vmin;
	left: 3vmin;
	box-shadow: -0.65vmin 0 0 -0.05vmin var(--bone);
}

.foot .bone + .bone + .bone {
	width: 0.65vmin;
	height: 0.65vmin;
	top: 2.75vmin;
	left: 1.25vmin;
	box-shadow: -0.5vmin 0 0 -0.1vmin var(--bone), 0.45vmin 0 0 0.05vmin var(--bone);
}

.foot .bone:before, .foot .bone:after {
	display: none;
}

.roof-2 .chimney:hover {
	animation: tilt 0.5s ease-in-out 0s infinite alternate;
	transform-origin: 10% 90%;
}

@keyframes tilt {
	50% { transform: rotate(2deg); }
}

.roof-2 .chimney:hover + .smoke span:nth-child(3n+3) {
	background: #f004;
}
.roof-2 .chimney:hover + .smoke span:nth-child(3n+2) {
	background: #0f04;
}
.roof-2 .chimney:hover + .smoke span:nth-child(3n+2) {
	background: #ff04;
}

.smoke {
	background: #f000;
	width: 30vmin;
	height: 75vmin;
	top: -62vmin;
	z-index: -1;
	overflow: hidden;
	left: 11vmin;
	clip-path: polygon(42% 100%, 24% 91%, 0% 80%, 0% 0%, 100% 0%, 100% 80%, 78% 90%, 48.5% 100%);
}

.smoke span {
	background: #fff2;
	width: 5vmin;
	height: 6vmin;
	border-radius: 100%;
	bottom: -10vmin;
	filter: blur(1vmin);
	animation: smoke-up 20s ease 0s infinite;
	left: 10vmin;
}

.smoke span:nth-child(2) {
	animation-delay: 0.75s;
	animation-duration: 16s;
}

.smoke span:nth-child(3n+2) {
	animation-delay: 1.5s;
	animation-duration: 12s;
	width: 3vmin;
	height: 4vmin;
}

.smoke span:nth-child(4) {
	animation-delay: 2.25s;
	animation-duration: 18s;
}

.smoke span:nth-child(5) {
	animation-delay: 3.1s;
	animation-duration: 21s;
}

.smoke span:nth-child(6) {
	animation-delay: 3.85s;
	animation-duration: 23s;
}

.smoke span:nth-child(7) {
	animation-delay: 4.4s;
	animation-duration: 21s;
}

.smoke span:nth-child(8) {
	animation-delay: 5.25s;
	animation-duration: 15s;
}

.smoke span:nth-child(9) {
	animation-delay: 6.9s;
	animation-duration: 17.5s;
}

.smoke span:nth-child(10) {
	animation-delay: 7.7s;
	animation-duration: 10.5s;
}

.smoke span:nth-child(11) {
	animation-delay: 8.4s;
	animation-duration: 13.5s;
}

.smoke span:nth-child(12) {
	animation-delay: 9.25s;
	animation-duration: 16.5s;
}

@keyframes smoke-up {
	0% { bottom: -10vmin; transform: scale(0.25); margin-left: 1vmin; }
	20% { transform: scale(0.5); }
	100% { margin-left: 5vmin; bottom: 35vmin; transform: scale(4) rotate(1080deg); opacity:0; }
}

.electricity {
	width: 50vmin;
	height: 52vmin;
	bottom: 0;
	left: -5vmin;
	z-index: -2;
}

.pole {
	background: var(--house);
	width: 1.75vmin;
	height: 60vmin;
	left: 1vmin;
	bottom: -2vmin;
	transform: skew(-2deg, 25deg) rotate(3deg);
	border-radius: 0.25vmin;
}

.bar {
	width: 10vmin;
	height: 0.5vmin;
	background: var(--house);
	transform: rotate(44deg) skew(30deg, -30deg);
	left: -0.8vmin;
}

.bar + .bar {
	top: 3vmin;
	left: -1vmin;
}

.bar span {
	background: var(--house);
	width: 0.2vmin;
	height: 2vmin;
	top: -1vmin;
	left: 1vmin;
	filter: drop-shadow(1.75vmin 0vmin 0px var(--house)) drop-shadow(5.75vmin 0vmin 0px var(--house));
}

.bar span:before,
.bar span:after{
	content: "";
	position: absolute;
	background: var(--house);
	width: 1vmin;
	height: 0.65vmin;
	border-radius: 1vmin;
	left: -0.35vmin;
	top: 0.1vmin;
}

.bar span:after {
	width: 0.75vmin;
	top: -0.35vmin;
	left: -0.2vmin
}

.box {
	background: var(--house);
	width: 2vmin;
	height: 4vmin;
	right: 15vmin;
	transform: rotate(9deg);
	top: -2vmin;
}

.box:before {
	content: "";
	position: absolute;
	background: var(--house);
	width: 2vmin;
	height: 3vmin;
	left: -1.25vmin;
	top: 0.5vmin;
	transform: rotateX(-12deg) rotateY(77deg) rotate(45deg);
}

.cable:hover ~ .box:before {
	animation: box-move 0.5s ease 0s infinite;
}

@keyframes box-move {
	50% { transform: rotateX(12deg) rotateY(74deg) rotate(45deg); }
}

.cable {
	width: 34vmin;
	height: 8vmin;
	--cables: #fff0 30vmin, var(
		--house) calc(30vmin + 1px) calc(30vmin + 2px), #fff0 calc(30vmin + 3px) 100%;
	background: radial-gradient(circle at 50% -25vmin, var(--cables)), radial-gradient(circle at 55% -25vmin, var(--cables)), radial-gradient(circle at 42% -23.5vmin, var(--cables)), radial-gradient(circle at 53% -26vmin, var(--cables)), radial-gradient(circle at 36% -27vmin, var(--cables));
	top: -2vmin;
	background-repeat: no-repeat;
	background-size: 100% 100%, 100% 100%, 100% 100%, 81% 100%, 81% 100%;
	background-position: 100% 0, 100% 0, 100% 0, 100% 1vmin, 100% 3vmin;
	transition: all 0.25s var(--bounce) 0s;
	animation: move-cable 0.5s var(--bounce) 0s 2;
}

.cable + .cable {
	transform: rotate(113deg) rotateX(180deg) scaleX(3);
	transform-origin: 0 0%;
	left: 6vmin;
	top: -17vmin;
	clip-path: polygon(16% 0, 100% 0, 100% 100%, 15% 100%);
	border-bottom: 2px solid var(--house);
	border-radius: 0 100% 100% 100%;
}

.cable:hover {
	animation-iteration-count: infinite;
}

@keyframes move-cable {
	50% { top: -1.75vmin; }    
}

.cable + .cable {
	animation: none;
}

.cable span {
	width: 3vmin;
	height: 5vmin;
	background: var(--house);
	left: 9.5vmin;
	top: 6.25vmin;
	transform-origin: 50% 0;
	animation: hanging 0.01s ease 0s infinite alternate, hanging-2 1s ease 0s infinite alternate; 
	/*animation-play-state: paused;*/
	animation-iteration-count: 80, 1;
	animation-fill-mode: forwards;
	clip-path: polygon(35% 4%, 35% 4%, 37% 7%, 37% 7%, 40% 10%, 40% 10%, 41% 15%, 41% 15%, 32% 37%, 32% 37%, 30% 33%, 30% 33%, 22% 52%, 22% 52%, 19% 58%, 19% 58%, 19% 62%, 19% 62%, 19% 66%, 19% 66%, 20% 85%, 20% 85%, 17% 84%, 17% 84%, 21% 87%, 21% 87%, 22% 88%, 22% 88%, 24% 87%, 24% 87%, 28% 82%, 28% 82%, 30% 80%, 30% 80%, 33% 78%, 33% 78%, 35% 81%, 35% 81%, 37% 83%, 37% 83%, 39% 88%, 39% 88%, 34% 90%, 34% 90%, 32% 94%, 32% 94%, 31% 97%, 31% 97%, 35% 96%, 35% 96%, 39% 94%, 39% 94%, 41% 92%, 41% 92%, 45% 93%, 45% 93%, 49% 93%, 49% 93%, 49% 93%, 49% 93%, 51% 93%, 51% 93%, 55% 93%, 55% 93%, 58% 92%, 58% 92%, 60% 94%, 60% 94%, 64% 96%, 64% 96%, 68% 96%, 68% 96%, 68% 94%, 68% 94%, 66% 91%, 66% 91%, 62% 89%, 62% 89%, 61% 88%, 61% 88%, 62% 85%, 62% 85%, 64% 81%, 64% 81%, 66% 79%, 66% 79%, 66% 78%, 66% 78%, 69% 81%, 69% 81%, 76% 87%, 76% 87%, 78% 87%, 78% 87%, 79% 87%, 79% 87%, 81% 85%, 81% 85%, 79% 86%, 79% 86%, 78% 85%, 78% 85%, 79% 84%, 79% 84%, 80% 79%, 80% 79%, 81% 65%, 81% 61%, 81% 59%, 81% 59%, 78% 53%, 78% 49%, 69% 33%, 69% 37%, 58% 16%, 58% 11%, 59% 11%, 59% 15%, 62% 8%, 62% 8%, 63% 6%, 63% 11%, 63% 4%, 63% 4%, 58% 3%, 58% 3%, 55% 3%, 55% 3%, 55% 8%, 55% 8%, 54% 13%, 54% 13%, 49% 23%, 49% 23%, 45% 14%, 45% 14%, 44% 9%, 44% 9%, 44% 7%, 44% 7%, 45% 4%, 45% 4%, 36% 4%, 36% 4%);
}

.cable:hover span {
	/*animation-play-state: running;  */ 
	animation-iteration-count: infinite;
}

@keyframes hanging {
	50% {
		clip-path: polygon(35% 4%, 35% 4%, 37% 7%, 37% 7%, 40% 10%, 40% 10%, 41% 15%, 41% 15%, 32% 37%, 32% 37%, 8% 33%, 16% 52%, 16% 52%, 17% 58%, 17% 58%, 18% 62%, 18% 62%, 18% 66%, 18% 66%, 20% 85%, 20% 85%, 17% 84%, 17% 84%, 21% 87%, 21% 87%, 22% 88%, 22% 88%, 24% 87%, 24% 87%, 28% 82%, 28% 82%, 30% 80%, 30% 80%, 33% 78%, 33% 78%, 35% 81%, 35% 81%, 37% 83%, 37% 83%, 39% 88%, 39% 88%, 34% 90%, 34% 90%, 32% 94%, 32% 94%, 31% 97%, 31% 97%, 35% 96%, 35% 96%, 39% 94%, 39% 94%, 41% 92%, 41% 92%, 45% 93%, 45% 93%, 49% 93%, 49% 93%, 49% 93%, 49% 93%, 51% 93%, 51% 93%, 55% 93%, 55% 93%, 58% 92%, 58% 92%, 60% 94%, 60% 94%, 64% 96%, 64% 96%, 68% 96%, 68% 96%, 68% 94%, 68% 94%, 66% 91%, 66% 91%, 62% 89%, 62% 89%, 61% 88%, 61% 88%, 62% 85%, 62% 85%, 64% 81%, 64% 81%, 66% 79%, 66% 79%, 66% 78%, 66% 78%, 69% 81%, 69% 81%, 76% 87%, 76% 87%, 78% 87%, 78% 87%, 79% 87%, 79% 87%, 81% 85%, 81% 85%, 79% 86%, 79% 86%, 78% 85%, 78% 85%, 79% 84%, 79% 84%, 81% 79%, 81% 79%, 83% 65%, 83% 61%, 83% 59%, 83% 59%, 85% 53%, 86% 49%, 96% 33%, 69% 37%, 58% 16%, 58% 11%, 58% 11%, 60% 9%,  61% 8%, 63% 5%, 63% 11%, 63% 4%, 63% 4%, 58% 3%, 58% 3%, 55% 3%, 55% 3%, 55% 8%, 55% 8%, 54% 13%, 54% 13%, 49% 23%, 49% 23%, 45% 14%, 45% 14%, 44% 9%, 44% 9%, 44% 7%, 44% 7%, 45% 4%, 45% 4%, 36% 4%, 36% 4%);
	}
}

@keyframes hanging-2 {
	25% { transform: rotate(-5deg); }
	0%, 50% { transform: rotate(0deg); }
	75% { transform: rotate(5deg); }
}

.cable:hover span:before,
.cable:hover span:after {
	content: "";
	position: absolute;
	width: 0.1vmin;
	height: 0.1vmin;
	background: #ff0000;
	bottom: 13%;
	border-radius: 100%;
	left: 44%;
}

.cable:hover span:after {
	left: 56%;
}

.cable span + span {
	left: 12vmin;
	top: 5.75vmin;
	width: 3.5vmin;
	height: 5.83vmin;
	animation-delay: 0.27s, 0.35s;
	animation-duration: 0.015s, 0.85s;
}

.cable span + span + span {

width: 2.75vmin;
	height: 4.58vmin;
	left: 14.5vmin;
	top: 5vmin;
	animation-delay: 0.45s, 0.75s;
}

.sparks {
	width: 10vmin;
	height: 10vmin;
	right: 0vmin;
	top: -3vmin;
}

.sparks span {
	background: #fc0c;
	width: 0.25vmin;
	height: 0.25vmin;
	right: 2vmin;
	top: 3vmin;
	animation: sparking 0.75s ease-out infinite;
	animation-iteration-count: 2;
	animation-fill-mode: forwards;
}

@keyframes sparking {
	25% { right: 3vmin; top: 1vmin; }
	85% { opacity: 0; top: 0vmin; }
	100% { right: 5vmin; top: 2vmin;  opacity: 0; }
}

.sparks span:nth-child(2){
	margin-top: 1vmin;
	margin-left: 0.5vmin;
	animation-duration: 0.65s;
}

.sparks span:nth-child(3){
	margin-top: -0.5vmin;
	margin-left: 0.75vmin;
	animation-duration: 0.55s;
}

.sparks span:nth-child(4){
	margin-top: -1.5vmin;
	margin-left: 1.75vmin;
	animation-duration: 0.8s;
}

.sparks span:nth-child(4){
	margin-top: 1.5vmin;
	margin-left: 2.5vmin;
	animation-duration: 1.1s;
}

.cable:hover ~ .box .sparks span {
	animation-iteration-count: infinite;
}

body:has(.cable:hover) .window ,
body:has(.cable:hover) .door{
	animation: light-off 4s ease 0s infinite;
}

body:has(.cable:hover) .level-1 .window {
	animation-duration: 2.25s;
}
body:has(.cable:hover) .level-2 .window {
	animation-duration: 1.7s;
}

@keyframes light-off {
	5%, 20% {--window: rgb(6, 6, 48);}
	12.5% { --window: inherit; }
}

.pumpkin {
	width: 8vmin;
	height: 6vmin;
	right: 9.15vmin;
	bottom: 15.125vmin;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: rotate(5deg);
	animation: move-pumpkin 3s ease 0s 1; 
}

.pumpkin:before {
	content: "";
	position: absolute;
	border: 0.51vmin solid var(--house);
	width: 0.75vmin;
	height: 1vmin;
	top: -0.5vmin;
	left: calc(50% - 0.25vmin);
	border-right: 0.25vmin solid #fff0;
	border-bottom-color: #fff0;
	border-top-width: 0.25vmin;
	border-radius: 0.75vmin;
}

.pumpkin:hover {
	animation: move-pumpkin 3s ease 0s infinite alternate; 
}

@keyframes move-pumpkin {
	25% { transform: rotate(-9deg);}
	75% { transform: rotate(8deg); }
}

.pumpkin span {
	width: 2.5vmin;
	height: 5.25vmin;
	background: var(--house);
	border-radius: 100%;
}

.pumpkin span + span {
	height: 5vmin;
	margin-left: 2.25vmin;
}

.pumpkin span + span + span {
	margin-left: -2.25vmin;
}

.pumpkin span + span + span + span {
	height: 4.5vmin;
	margin-left: 4.5vmin;
}

.pumpkin span + span + span + span + span {
	height: 4.5vmin;
	margin-left: -4.5vmin;
}

.pumpkin .eyes {
	width: 3.5vmin;
	height: 1.5vmin;
	top: 1.5vmin;
}

.pumpkin .eyes:before, .pumpkin .eyes:after {
	content: "";
	position: absolute;
	width: 1.25vmin;
	height: 1.25vmin;
	background: radial-gradient(circle at 50% 100%, #f60,#fc0, #fff 30%, #0f0f41 40%);
	clip-path: polygon(1% 99%, 11% 73%, 22% 48%, 33% 23%, 47% 0%, 61% 23%, 73% 49%, 86% 73%, 99% 99%, 75% 97%, 58% 95%, 50% 95%, 40% 95%, 22% 97%);
	transform: rotate(-10deg);
	background-size: 100% 200%;
	background-repeat: no-repeat;
	background-position: 0 0%;
	transition: background-position 0.5s ease 0s;
}

.pumpkin .eyes:after {
	left: 2.25vmin;
	transform: rotate(10deg);
}

.pumpkin:hover .eyes:before,
.pumpkin:hover .eyes:after,
.pumpkin:hover .nose {
	animation: pumpkin-eyes 0.5s ease 0s 1, pumpkin-eyes-2 0.25s ease 0s infinite alternate;
}

.pumpkin:hover .nose {
	animation-duration: 0.5s, 0.35s;
}

@keyframes pumpkin-eyes {
	100% { background-position: 0 100%;}
}

@keyframes pumpkin-eyes-2 {
	0%, 100% { background-position: 0 100%;}
	66% { background-position: 0 115%;}
}

.pumpkin .nose {
	width: 1vmin;
	height: 1vmin;
	background: radial-gradient(circle at 50% 100%, #f60,#fc0, #fff 30%, #0f0f41 40%);
	clip-path: polygon(1% 99%, 11% 73%, 22% 48%, 33% 23%, 47% 0%, 61% 23%, 73% 49%, 86% 73%, 99% 99%, 75% 97%, 58% 95%, 50% 95%, 40% 95%, 22% 97%);
	transform: rotate(1deg);
	background-size: 100% 200%;
	background-repeat: no-repeat;
	background-position: 0 0%;
	transition: background-position 0.5s ease 0s;

}

.pumpkin .mouth {
	width: 3.5vmin;
	height: 1.5vmin;
	top: 3.1vmin;
	border-radius: 0 0 10vmin 10vmin;
	background: radial-gradient(circle at 50% -1.25vmin, var(--house) 2vmin, #fff0 2vmin ), radial-gradient(circle at 50% 100%, #f60,#fc0, #fbff00 40%, #0f0f41 60%);
	transform: rotate(1deg);
	background-size: 100% 100%, 100% 300%;
	background-repeat: no-repeat;
	background-position: 0 0, 0 0%;
	transition: background-position 0.5s ease 0s;
}

@keyframes pumpkin-mouth {
	100% { background-position: 0 0, 0 150%;}
}

@keyframes pumpkin-mouth-2 {
	0%, 100% { background-position: 0 0, 0 100%;}
	66% { background-position: 0 0, 0 75%;}
}

.pumpkin:hover .mouth {
	animation: pumpkin-mouth 0.5s ease 0s 1, pumpkin-mouth-2 0.25s ease 0s infinite alternate;
}

.pumpkin .teeth {
	width: 100%;
	height: 100%;
}

.pumpkin .teeth:before {
	content: "";
	position: absolute;
	width: 0.35vmin;
	height: 0.5vmin;
	background: var(--house);
	left: 0.75vmin;
	top: 0.2vmin;
	box-shadow: 
		1vmin 0.2vmin 0 0 var(--house), 
		2vmin 0.01vmin 0 0 var(--house), 
		1.5vmin 0.95vmin 0 0 var(--house), 
		0.35vmin 0.85vmin 0 0 var(--house), 
		-0.5vmin 0.5vmin 0 0 var(--house), 
		2.45vmin 0.15vmin 0 0 var(--house) 
}

.clouds {
    width: 100%;
    height: 40vmin;
    position: fixed;
    z-index: 2;
}

.clouds span {
    position: absolute;
    margin-left: -40vmin;
    width: 30vmin;
    height: 18vmin;
    background: #fff5;
    filter: blur(4vmin);
    border-radius: 70% 100% 93% 80% / 100% 69% 87% 82% ;
    animation: move-clouds 40s linear infinite;
}

@keyframes move-clouds {
    0% { margin-left: -40vmin; }
    33% {transform: rotate(3deg); }
    66% {transform: rotate(4deg); }
    100% { margin-left: calc(100% + 40vmin);}
}

.clouds span:before,
.clouds span:after{
    content: "";
    left: -4vmin;
    position: absolute;
    width: 14vmin;
    height: 11vmin;
    background: #fff2;
    filter: blur(1vmin);
    border-radius: 70% 100% 93% 80% / 100% 69% 87% 82% ;
    box-shadow: -4vmin 2vmin 1vmin 0 #fff9;
}

.clouds span:after {
    content: "";
    left: 24vmin;
    top: 10vmin;
    position: absolute;
    width: 12vmin;
    height: 10vmin;
    background: #fff2;
    filter: blur(1vmin);
    border-radius: 100% 69% 87% 82% / 70% 100% 93% 80% ;
}

.clouds span:nth-child(2) {
    transform: scale(0.7) rotate(170deg);
    animation-delay: -15s;
    animation-duration: 50s;
    height: 12vmin;
    width: 40vmin;
}

.clouds span:nth-child(3) {
    transform: scale(0.6) rotate(180deg);
    animation-delay: -26s;
    animation-duration: 35s;
}

.clouds span:nth-child(4) {
    transform: scale(1.1) rotate(-10deg);
    animation-delay: -33s;
    animation-duration: 65s;
}

Frontend Forever App